父组件如何向子组件传值

在React中，父组件向子组件传值可以通过以下两种方式实现：

1. 使用props属性传递数据：父组件可以通过在子组件的标签中添加属性来传递数据，例如：

// 父组件
function Parent() {
  const data = "Hello, Child!"
  return <Child data={data} />
}

// 子组件
function Child(props) {
  return <div>{props.data}</div>
}

在子组件中，可以通过props对象获取父组件传递的数据。

2. 使用Context API传递数据：Context API可以在组件树中共享数据，父组件可以通过创建Context和Provider来传递数据，子组件通过Consumer或useContext来获取数据，例如：

// 创建Context
const DataContext = React.createContext()

// 父组件
function Parent() {
  const data = "Hello, Child!"
  return (
    <DataContext.Provider value={data}>
      <Child />
    </DataContext.Provider>
  )
}

// 子组件
function Child() {
  const data = useContext(DataContext)
  return <div>{data}</div>
}

在子组件中，通过调用useContext函数获取Context中的数据。注意，使用Context API时，需要在父组件中包含Provider组件，并将数据通过value属性传递给Provider。