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

Question

请阐述在Solid.js中，父组件向子组件传递数据以及子组件向父组件反馈数据的常用方法，并给出简单代码示例。

Answer 1

父组件向子组件传递数据

在Solid.js中，父组件向子组件传递数据通过属性（props）实现。

1. 定义子组件并接收props：

import { createComponent } from 'solid-js';

const ChildComponent = props => {
  return <div>{props.data}</div>;
};

export default ChildComponent;

2. 父组件传递数据给子组件：

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

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

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

子组件向父组件反馈数据

子组件向父组件反馈数据通常通过在父组件中定义一个函数，并将其作为props传递给子组件，子组件调用这个函数来反馈数据。

1. 定义子组件并调用传递的函数：

import { createComponent } from 'solid-js';

const ChildComponent = props => {
  const handleClick = () => {
    props.onFeedback('Data from child');
  };
  return <button onClick={handleClick}>Send data to parent</button>;
};

export default ChildComponent;

2. 父组件定义反馈函数并传递给子组件：

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

const ParentComponent = () => {
  const handleChildFeedback = data => {
    console.log('Received from child:', data);
  };
  return (
    <div>
      <ChildComponent onFeedback={handleChildFeedback} />
    </div>
  );
};

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