面试题：Solid.js 中如何定义一个可复用的组件并传递属性

Question

在 Solid.js 中，描述如何定义一个简单的可复用组件，该组件接收一个字符串类型的属性 `name`，并在组件内部显示 'Hello, [name]!' 。同时说明组件定义的基本结构和属性传递的方式。

Answer 1

在Solid.js中，可以这样定义一个简单的可复用组件：

1. 组件定义基本结构：

   • 首先导入createComponent函数（Solid.js中用于创建组件的函数）。
   • 然后定义一个函数，该函数就是组件函数，函数接收属性作为参数，在函数内部返回JSX。

2. 属性传递方式：

   • 在父组件中使用该组件时，通过属性名=属性值的方式传递属性。

以下是具体代码示例：

import { createComponent } from 'solid-js';

// 定义组件
const HelloComponent = createComponent((props) => {
    const { name } = props;
    return <div>Hello, {name}!</div>;
});

// 在父组件中使用该组件
const ParentComponent = () => {
    return (
        <div>
            <HelloComponent name="John" />
        </div>
    );
};

在上述代码中：

• HelloComponent是定义的可复用组件，它接收props，并从props中解构出name属性。
• 在ParentComponent中，通过<HelloComponent name="John" />的方式将name属性值为John传递给了HelloComponent组件。