父组件如何向子组件传值

父组件向子组件传值的方式有两种：

1. Props 传递：父组件通过 props 向子组件传递数据，子组件通过 props 接收数据。

在父组件中：

<ChildComponent data={data} />

在子组件中：

export default function ChildComponent(props) {
  const { data } = props;
  // 使用 data 进行渲染
}

2. Context 传递：父组件通过 Context 向子组件传递数据，子组件通过 useContext 钩子函数接收数据。

在父组件中：

export const DataContext = React.createContext();

function ParentComponent() {
  const data = { name: '张三', age: 18 };

  return (
    <DataContext.Provider value={data}>
      <ChildComponent />
    </DataContext.Provider>
  );
}

在子组件中：

import { useContext } from 'react';
import { DataContext } from './ParentComponent';

export default function ChildComponent() {
  const data = useContext(DataContext);
  // 使用 data 进行渲染

  return <div>{data.name}</div>;
}

以上两种方式都可以实现父组件向子组件传递数据，具体使用哪种方式取决于具体场景和需求。