React 之外，父子组件如何互传数据？

2023-03-11 16:27:34

父子组件数据传递：超越 Props 的方法

在 React 中，父子组件之间的数据传递通常通过 props 来实现。然而，在某些场景下，props 可能难以使用或过于复杂。本文将探讨超出 props 范围的六种父子组件数据传递方法。

1. Context API

Context API 提供了一种共享状态的全局机制，组件可以通过 contextType 属性访问。父组件创建一个 Context 对象，并在子组件中使用 useContext hook 访问该对象。

// 父组件
const MyContext = React.createContext();

function ParentComponent() {
  const [count, setCount] = React.useState(0);
  return (
    <MyContext.Provider value={{ count, setCount }}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

// 子组件
function ChildComponent() {
  const { count, setCount } = React.useContext(MyContext);
  // ...
}

2. Reducer

Reducer 是一个纯函数，接受 state 和 action 并返回新的 state。父组件可以使用 useReducer hook 管理 state，并通过 props 将 state 传递给子组件。子组件可以通过 dispatch 函数触发 action 来修改 state。

// 父组件
function ParentComponent() {
  const [state, dispatch] = React.useReducer(reducer, { count: 0 });
  return (
    <div>
      <ChildComponent count={state.count} dispatch={dispatch} />
    </div>
  );
}

// 子组件
function ChildComponent({ count, dispatch }) {
  // ...
}

3. Redux

Redux 是一个状态管理库，它通过一个全局 store 管理应用程序的 state。组件可以通过 connect 函数连接到 store，并访问和修改 state。

// 父组件
function ParentComponent({ count, increment, decrement }) {
  return (
    <div>
      <ChildComponent count={count} />
    </div>
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(ParentComponent);

// 子组件
function ChildComponent({ count }) {
  // ...
}

4. MobX

MobX 也是一个状态管理库，使用 observable 对象管理 state。父组件创建一个 observable 对象，并在子组件中使用 observer HOC 访问和修改该对象。

// 父组件
const store = new Store();

@observer
function ParentComponent() {
  return (
    <ChildComponent store={store} />
  );
}

// 子组件
@observer
function ChildComponent({ store }) {
  // ...
}

5. 事件

事件机制允许组件之间通信。父组件定义事件处理程序，子组件触发事件时，父组件的处理程序将被调用。

// 父组件
function ParentComponent() {
  const handleIncrement = () => {
    // ...
  };

  const handleDecrement = () => {
    // ...
  };

  return (
    <ChildComponent onIncrement={handleIncrement} onDecrement={handleDecrement} />
  );
}

// 子组件
function ChildComponent({ onIncrement, onDecrement }) {
  // ...
}

6. 回调

回调函数允许组件之间以异步方式通信。父组件将回调函数作为 props 传递给子组件，子组件可以在适当的时候调用回调函数。

// 父组件
function ParentComponent() {
  const increment = () => {
    // ...
  };

  const decrement = () => {
    // ...
  };

  return (
    <ChildComponent onIncrement={increment} onDecrement={decrement} />
  );
}

// 子组件
function ChildComponent({ onIncrement, onDecrement }) {
  // ...
}

7. Refs

Refs 允许父组件获取子组件的引用。父组件可以使用 ref 属性获取子组件的引用，然后通过该引用访问子组件的方法和属性。

// 父组件
function ParentComponent() {
  const childRef = React.createRef();

  return (
    <ChildComponent ref={childRef} />
  );
}

// 子组件
function ChildComponent() {
  const increment = () => {
    // ...
  };

  return <div>...</div>;
}