如何在含if-else条件的子组件中更新React父组件状态？

问题根源 #

你当前的name状态是定义在App组件内部的，当你渲染两个不同type的App实例时，它们是完全独立的组件，各自拥有独立的name状态副本。点击left-section分支里的按钮，只会更新这个App实例的状态，另一个right-section的App实例的状态不会同步变化。

解决方案：状态提升 #

把共享的状态提升到两个App组件的共同父组件中，让两个App实例共享同一个状态，这样点击按钮时就能同时更新两个组件的显示。

修改步骤及代码示例 #

1. 创建父组件，将状态放在这里并传递给子组件

import React, { useState } from "react";
import App from "./App";

export default function ParentComponent() {
  // 共享状态放在父组件
  const [name, setName] = useState(false);

  return (
    <div>
      {/* 渲染两个App实例，传入type、共享的name和setName */}
      <App type="left-section" name={name} setName={setName} />
      <App type="right-section" name={name} setName={setName} />
    </div>
  );
}

2. 修改App组件，移除内部状态，改用父组件传递的props

import React from "react";
import "./styles.css";
import Halfbox from "./Halfbox";

export default function App(props) {
  // 从props接收共享的状态和更新方法
  const { name, setName } = props;
  
  if (props.type === "left-section") {
    return (
      <div className="App">
        <b className="state"> {name ? <>right update</> : <>right not update</>}</b>
        <Halfbox setName={setName} />
      </div>
    );
  } else if (props.type === "right-section") {
    return (
      <div className="App">
        <b className="state"> {name ? <>left update</> : <>left not update</>}</b>
        <p>This is left box</p>
      </div>
    );
  }
}

3. Halfbox组件保持不变，它只需要调用传入的setName方法即可

export default function Halfbox(props) {
  const handleClick = (e) => {
    props.setName(true);
  };

  return (
    <div>
      <h1>Halfbox</h1>
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

效果说明 #

修改后，两个App组件共享父组件的name状态。点击按钮时，父组件的状态会被更新，两个App组件都会接收到最新的name值，从而同步更新各自的显示内容。

内容的提问来源于stack exchange，提问作者Rohit Verma