面试题：Solid.js 中父子组件如何进行通信

Question

在 Solid.js 应用中，描述一下实现父子组件通信的常规方式，并举例说明如何通过属性传递和事件处理来完成数据的传递与交互。

Answer 1

1. 实现父子组件通信的常规方式

在 Solid.js 应用中，父子组件通信主要通过属性传递（向下传递数据）和事件处理（向上传递数据）来实现。

2. 属性传递（父 -> 子）

父组件将数据作为属性传递给子组件，子组件通过接收这些属性来获取数据。

示例：

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

const Parent = () => {
  const [count, setCount] = createSignal(0);

  return (
    <div>
      <h1>Parent Component</h1>
      <Child count={count()} />
      <button onClick={() => setCount(count() + 1)}>Increment in Parent</button>
    </div>
  );
};

export default Parent;

const Child = ({ count }) => {
  return (
    <div>
      <h2>Child Component</h2>
      <p>Count from Parent: {count}</p>
    </div>
  );
};

export default Child;

在上述代码中，父组件 Parent 创建了一个信号 count 及其更新函数 setCount，并将 count 的值作为属性 count 传递给子组件 Child。子组件通过解构属性接收 count 并展示。

3. 事件处理（子 -> 父）

子组件通过触发事件，将数据传递给父组件。父组件通过监听子组件触发的事件来获取数据。

示例：

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

const Parent = () => {
  const [message, setMessage] = createSignal('');

  const handleChildClick = (msg) => {
    setMessage(msg);
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <Child onChildClick={handleChildClick} />
      <p>Message from Child: {message()}</p>
    </div>
  );
};

export default Parent;

const Child = ({ onChildClick }) => {
  const handleClick = () => {
    onChildClick('Hello from Child!');
  };

  return (
    <div>
      <h2>Child Component</h2>
      <button onClick={handleClick}>Send Message to Parent</button>
    </div>
  );
};

export default Child;

在这段代码中，子组件 Child 接收父组件传递的 onChildClick 函数作为属性。当子组件的按钮被点击时，调用 onChildClick 并传递数据 'Hello from Child!'，父组件通过 handleChildClick 函数接收并更新自身状态。