5种无状态管理工具下的React父子组件通信方法

2023-12-30 10:59:16

前言

在 React 中，父子组件的通信是常见的问题。除了使用状态管理工具（如 redux）以外，也可以实现父子组件的相互通信。本文介绍了 5 种无状态管理工具下的父子组件通信方法，包括使用 props、使用 state、使用 ref、使用 Context 和使用自定義事件。

使用 props

props 是 React 中传递数据的一种方式。父组件可以将数据通过 props 传递给子组件，子组件可以通过 props 访问这些数据。例如：

// 父组件
const Parent = () => {
  const name = 'John Doe';
  return <Child name={name} />;
};

// 子组件
const Child = (props) => {
  return <p>Hello, {props.name}!</p>;
};

在这种情况下，父组件通过 props 将 name 传递给子组件，子组件通过 props 访问 name 并将其显示在页面上。

使用 state

state 是 React 中存储数据的一种方式。父组件可以将数据存储在 state 中，然后将 state 传递给子组件。子组件可以通过 state 访问这些数据。例如：

// 父组件
const Parent = () => {
  const [name, setName] = useState('John Doe');
  return <Child name={name} />;
};

// 子组件
const Child = (props) => {
  return <p>Hello, {props.name}!</p>;
};

在这种情况下，父组件将 name 存储在 state 中，然后将 name 传递给子组件。子组件通过 props 访问 name 并将其显示在页面上。

使用 ref

ref 是 React 中获取组件实例的一种方式。父组件可以使用 ref 获取子组件的实例，然后通过子组件的实例来访问子组件的数据和方法。例如：

// 父组件
const Parent = () => {
  const childRef = useRef();
  return (
    <div>
      <Child ref={childRef} />
      <button onClick={() => { console.log(childRef.current.state.name) }}>Log Child's Name</button>
    </div>
  );
};

// 子组件
const Child = (props) => {
  const [name, setName] = useState('John Doe');
  return <p>Hello, {name}!</p>;
};

在这种情况下，父组件使用 ref 获取子组件的实例，然后通过子组件的实例来访问子组件的 state。

使用 Context

Context 是 React 中一种全局状态管理的方式。父组件可以将数据存储在 Context 中，然后子组件可以通过 Context 访问这些数据。例如：

// 父组件
const Parent = () => {
  const context = createContext({ name: 'John Doe' });
  return (
    <context.Provider value={context}>
      <Child />
    </context.Provider>
  );
};

// 子组件
const Child = () => {
  const context = useContext(Context);
  return <p>Hello, {context.name}!</p>;
};

在这种情况下，父组件将 name 存储在 Context 中，然后子组件通过 Context 访问 name 并将其显示在页面上。

使用自定義事件

自定義事件是 React 中一种触发事件的方式。父组件可以触发一个自定義事件，然后子组件可以通过监听这个事件来做出反应。例如：

// 父组件
const Parent = () => {
  const [name, setName] = useState('John Doe');
  const handleClick = () => {
    setName('Jane Doe');
  };
  return (
    <div>
      <Child onNameChange={handleClick} />
      <button onClick={handleClick}>Change Name</button>
    </div>
  );
};

// 子组件
const Child = (props) => {
  return <p>Hello, {props.name}!</p>;
};