在 React 里怎样实现从父组件向同级子组件传值

在React开发中，组件间的数据传递是一个常见的需求。其中，从父组件向同级子组件传值是一种特定的场景，需要采用合适的方法来实现。下面将介绍几种常见的实现方式。

提升状态到共同父组件

这是最常见的方法之一。当需要在同级子组件之间共享数据时，可以将共享的状态提升到它们的共同父组件中。父组件通过props将状态传递给各个子组件。

例如，有一个父组件Parent，包含两个同级子组件Child1和Child2。在Parent组件中定义一个状态data，然后通过props将data分别传递给Child1和Child2。

import React, { useState } from'react';
import Child1 from './Child1';
import Child2 from './Child2';

const Parent = () => {
  const [data, setData] = useState('Hello from Parent');

  return (
    <div>
      <Child1 data={data} />
      <Child2 data={data} />
    </div>
  );
};

export default Parent;

使用Context API

Context API提供了一种在组件树中共享数据的方式，无需通过中间组件一层一层地传递props。

创建一个DataContext：

import React from'react';

const DataContext = React.createContext();

export default DataContext;

然后，在父组件中使用DataContext.Provider来提供数据：

import React, { useState } from'react';
import DataContext from './DataContext';
import Child1 from './Child1';
import Child2 from './Child2';

const Parent = () => {
  const [data, setData] = useState('Hello from Parent');

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

export default Parent;

子组件可以通过useContext钩子来获取数据：

import React, { useContext } from'react';
import DataContext from './DataContext';

const Child1 = () => {
  const data = useContext(DataContext);

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

export default Child1;

通过以上方法，就可以在React中实现从父组件向同级子组件传值，根据具体的项目需求和场景选择合适的方式。