React组件之间如何通信？

原创已于 2023-08-24 21:08:54 修改 · 136 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #前端框架

于 2023-08-24 14:39:02 首次发布

本文介绍了JavaScript中React框架下，父组件向子组件、子组件向父组件以及兄弟组件间的通信方式，重点讲解了使用React.Context进行跨层级组件数据传递的方法。

组件传递的方式有很多种，根据传送者和接受者可以分为如下：

父组件向子组件传递：父组件在调用子组件的时候，只需要在子组件标签内传递参数，子组件通过props属性就能接收父组件传递过来的参数。

子组件向父组件传递：子组件向父组件通讯的基本思路是，父组件定义一个函数，并将函数传递给子组件，子组件拿到这个函数，在子组件内部调用这些函数，通过这个函数的回调，拿到子组件传递过来的数据。

兄弟组件之间的通讯：如果是兄弟组件之间的传递，则父组件作为中间层来实现数据的互通，通过使用父组件传递。

父组件向后代组件传递：使用React的Context来进行组件之间的数据传递是一种非常灵活和强大的方法。它允许您在组件树中传递数据，而不必通过多层级的props传递。
具体操作：

1.创建一个Context：首先，您需要创建一个Context对象，可以使用React.createContext来实现。这个Context将包含要传递的数据。

// 创建上下文
const MyContext = React.createContext();

2.提供数据：在父组件中，通过<MyContext.Provider>组件包裹子组件，并使用value属性传递要共享的数据。

function ParentComponent() {
  const data = "Hello from parent";

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

3.使用数据：在子组件中，使用useContext钩子（在函数式组件中）或者MyContext.Consumer组件（在类组件中）来获取从上下文传递的数据。

函数组件中使用useContext：

function ChildComponent() {
  const data = React.useContext(MyContext);
  return <div>{data}</div>;
}

类组件中使用MyContext.Consumer：

class ChildComponent extends React.Component {
  render() {
    return (
      <MyContext.Consumer>
        {(data) => <div>{data}</div>}
      </MyContext.Consumer>
    );
  }
}