面试题：Solid.js中Props属性传递机制的常规应用

Question

在Solid.js中，假设你有一个父组件`ParentComponent`和一个子组件`ChildComponent`，父组件需要传递一个字符串类型的`name`属性给子组件并在子组件中显示出来。请写出实现该功能的代码示例，包括父组件和子组件的代码，同时简要说明Props属性传递过程。

Answer 1

子组件 ChildComponent.js

import { createSignal } from 'solid-js';

const ChildComponent = ({ name }) => {
  return <div>{name}</div>;
};

export default ChildComponent;

父组件 ParentComponent.js

import { createSignal } from'solid-js';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [name, setName] = createSignal('张三');

  return (
    <div>
      <ChildComponent name={name()} />
    </div>
  );
};

export default ParentComponent;

Props属性传递过程说明

1. 在父组件 ParentComponent 中，定义了一个信号 name 并初始化为字符串 '张三'。
2. 在父组件的返回JSX中，通过 <ChildComponent name={name()}/> 将 name 的值作为 name 属性传递给 ChildComponent 子组件。
3. 在子组件 ChildComponent 中，通过函数参数解构接收 name 属性，并在返回的JSX中直接展示这个属性值。这样就完成了从父组件到子组件的字符串属性传递。