由于另一个子组件，如何在反应中渲染另一个子组件

Question

一个组件有 2 个子组件，在更改其中一个子组件中的 switch 值时，它应该重新渲染另一个子组件。如何做到这一点？请用代码片段解释。

Answer 1

React 组件渲染/重新渲染有几个原因之一：

1. 组件排队状态更新。
2. 父组件重新渲染。

导致案例 2 是实现您所要求的最简单方法。两个孩子的父组件只需要一些声明的状态，孩子 1 可以在更新其本地状态时调用回调 prop 以触发父组件重新呈现自己及其子 ReactTree。

例子：

const Child1 = ({ onChange }) => {
  const [value, setValue] = React.useState();

  React.useEffect(() => {
    onChange(value);
  }, [onChange, value]);

  return (
    <React.Fragment>
      <h1>Child 1</h1>
      <label>
        Value
        <input
          type="checkbox"
          value={value}
          onChange={(e) => setValue(e.target.checked)}
        />
      </label>
    </React.Fragment>
  );
};

const Child2 = () => {
  React.useEffect(() => {
    console.log("Child 2 render " + new Date());
  });

  return <h1>Child 2</h1>;
};

function App() {
  const [, rerender] = React.useState();

  return (
    <div className="App">
      <Child1 onChange={rerender} />
      <Child2 />
    </div>
  );
}

const rootElement = document.getElementById("root");
const root = ReactDOM.createRoot(rootElement);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<div id="root" />

还有其他方法可以触发同级组件通过公共祖先组件重新呈现，例如 React 上下文提供程序。