如何在 React 中更新父组件的状态

在 React 中，管理组件间的状态通信是一个常见的问题。假设我们有如下的组件结构：

Component 1
 - |- Component 2
 - - |- Component 4
 - - -  |- Component 5
Component 3

Component 3 需要根据 Component 5 的状态显示一些数据。由于 props 是不可变的，不能简单地将它们的状态保存在 Component 1 并传递下去。那么，如何在不使用 Redux 的情况下，仅用 React 来解决这个问题呢？

解决方法

方法一：通过回调函数传递状态改变函数

可以将状态改变函数作为 props 传递给子组件，并在子组件中调用它来更新父组件的状态。

示例代码如下：

import React, { useState } from 'react';

const ParentComponent = () => {
  const [state, setState] = useState('');

  return (
    <ChildComponent stateChanger={setState} />
  );
};

const ChildComponent = ({ stateChanger, ...rest }) => {
  return (
    <button onClick={() => stateChanger('New data')}></button>
  );
};

在上述示例中，ParentComponent 中定义了一个状态 state 及其改变函数 setState。然后将 setState 作为 stateChanger prop 传递给 ChildComponent。在 ChildComponent 中，通过调用 stateChanger 来更新 ParentComponent 的状态。

方法二：使用上下文（Context）

对于更复杂的组件结构，可以考虑使用 React 的 Context 来实现组件间的状态共享。

首先，创建一个 Context：

import React, { createContext, useState } from 'react';

const AppContext = createContext();

const AppProvider = ({ children }) => {
  const [state, setState] = useState('');

  return (
    <AppContext.Provider value={{ state, setState }}>
      {children}
    </AppContext.Provider>
  );
};

export { AppContext, AppProvider };

然后，在父组件中使用 AppProvider 包裹子组件：

import React from 'react';
import { AppProvider } from './AppContext';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  return (
    <AppProvider>
      <ChildComponent />
    </AppProvider>
  );
};

export default ParentComponent;

最后，在子组件中使用 useContext 来访问和更新父组件的状态：

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

const ChildComponent = () => {
  const { state, setState } = useContext(AppContext);

  return (
    <button onClick={() => setState('New data')}></button>
  );
};

export default ChildComponent;