让沟通更顺畅：React 组件间通信指南

2023-09-29 15:22:13

在React中，组件化是其核心思想之一。组件之间的数据传递也变得十分关键。本文将为您介绍几种常见的React组件间通信方式。

一、父组件与子组件之间

父组件与子组件之间的数据传递是最常见的情况。父组件可以使用props属性来向子组件传递数据。

// 父组件
const ParentComponent = () => {
  const data = {
    name: 'John Doe',
    age: 30
  };

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

// 子组件
const ChildComponent = (props) => {
  const { data } = props;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.age}</p>
    </div>
  );
};

二、子组件与父组件之间

子组件也可以通过props属性将数据传递给父组件。

// 子组件
const ChildComponent = (props) => {
  const data = 'Hello from child component!';

  return (
    <div>
      <button onClick={() => props.onDataChange(data)}>Send data to parent</button>
    </div>
  );
};

// 父组件
const ParentComponent = () => {
  const [data, setData] = useState('');

  const onDataChange = (data) => {
    setData(data);
  };

  return (
    <div>
      <ChildComponent onDataChange={onDataChange} />
      <h1>{data}</h1>
    </div>
  );
};

三、发布者与订阅者模式（Context）

发布者与订阅者模式是一种将数据传递给多个组件的有效方法。React中，可以通过Context API实现。

// 创建一个Context对象
const MyContext = React.createContext();

// 在父组件中提供Context对象
const ParentComponent = () => {
  const data = 'Hello from parent component!';

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

// 在子组件中使用Context对象
const ChildComponent = () => {
  const data = React.useContext(MyContext);

  return (
    <div>
      <h1>{data}</h1>
    </div>
  );
};

四、兄弟组件间

兄弟组件之间的数据传递可以通过共享父组件的状态来实现。

// 父组件
const ParentComponent = () => {
  const [data, setData] = useState('');

  const onDataChange = (data) => {
    setData(data);
  };

  return (
    <div>
      <ChildComponent1 onDataChange={onDataChange} />
      <ChildComponent2 data={data} />
    </div>
  );
};

// 子组件1
const ChildComponent1 = (props) => {
  const data = 'Hello from child component 1!';

  return (
    <div>
      <button onClick={() => props.onDataChange(data)}>Send data to parent</button>
    </div>
  );
};

// 子组件2
const ChildComponent2 = (props) => {
  const { data } = props;

  return (
    <div>
      <h1>{data}</h1>
    </div>
  );
};

五、Redux

Redux是一种流行的状态管理库，它可以帮助您管理应用程序中的全局状态。通过Redux，您可以将数据存储在一个中心化的store中，并通过action来更新数据。

// 创建一个Redux store
const store = createStore(reducer);

// 在父组件中使用Redux
const ParentComponent = () => {
  const data = useSelector((state) => state.data);

  return (
    <div>
      <ChildComponent />
    </div>
  );
};

// 在子组件中使用Redux
const ChildComponent = () => {
  const dispatch = useDispatch();

  const onDataChange = (data) => {
    dispatch({ type: 'SET_DATA', payload: data });
  };

  return (
    <div>
      <button onClick={() => onDataChange('Hello from child component!')}>Send data to store</button>
    </div>
  );
};