面试题：Solid.js 中父子组件通信的常见方式有哪些及如何实现

Question

请详细阐述 Solid.js 中实现父子组件通信的常见方法，例如如何通过 props 传递数据给子组件，子组件又如何向父组件反馈信息，要求结合代码示例说明。

Answer 1

通过 props 传递数据给子组件

在 Solid.js 中，父组件可以通过 props 将数据传递给子组件。以下是一个简单的示例：

1. 创建子组件：

import { createSignal } from 'solid-js';

const ChildComponent = (props) => {
  return <div>{props.message}</div>;
};

export default ChildComponent;

2. 父组件中使用子组件并传递数据：

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

const ParentComponent = () => {
  const message = 'Hello from parent';
  return <ChildComponent message={message} />;
};

render(() => <ParentComponent />, document.getElementById('app'));

在上述代码中，父组件 ParentComponent 定义了一个 message 变量，并将其作为 props 传递给 ChildComponent。子组件通过 props.message 来接收这个数据并展示。

子组件向父组件反馈信息

子组件向父组件反馈信息通常通过回调函数实现。以下是示例：

1. 更新子组件：

import { createSignal } from'solid-js';

const ChildComponent = (props) => {
  const handleClick = () => {
    props.onChildClick('Child button clicked');
  };
  return <button onClick={handleClick}>Click me</button>;
};

export default ChildComponent;

2. 更新父组件：

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

const ParentComponent = () => {
  const handleChildClick = (message) => {
    console.log(message);
  };
  return <ChildComponent onChildClick={handleChildClick} />;
};

render(() => <ParentComponent />, document.getElementById('app'));

在这个示例中，子组件 ChildComponent 有一个按钮，点击按钮时会调用 props.onChildClick 回调函数，并传递一个字符串。父组件 ParentComponent 定义了 handleChildClick 函数，并将其作为 props 传递给子组件。当子组件调用这个回调时，父组件的函数就会被执行，从而实现子组件向父组件反馈信息。