如何在Selector组件修改myTitle并触发Display组件重新渲染？

这是典型的父子组件状态交互场景，核心通过props传递状态和更新方法来实现，直接上代码方案：

1. 主文件 App.js #

这里把状态myTitle传给Display组件用于展示，把状态更新函数setMyTitle传给Selector组件用于修改状态：

import { useState } from 'react';
import Selector from './Selector';
import Display from './Display';

function App() {
  const [myTitle, setMyTitle] = useState('初始标题');

  return (
    <div className="app-container">
      <Selector setMyTitle={setMyTitle} />
      <Display myTitle={myTitle} />
    </div>
  );
}

export default App;

2. Selector.js 组件 #

通过props接收父组件的setMyTitle方法，这里用输入框实时触发状态更新，你也可以改成按钮点击等其他交互：

function Selector({ setMyTitle }) {
  return (
    <div className="selector">
      <label>修改标题：</label>
      <input
        type="text"
        onChange={(e) => setMyTitle(e.target.value)}
        placeholder="输入新标题"
      />
    </div>
  );
}

export default Selector;

3. Display.js 组件 #

通过props接收父组件的myTitle状态，当父组件状态更新时，该组件会自动重新渲染并展示最新值：

function Display({ myTitle }) {
  return (
    <div className="display">
      <h2>当前标题：</h2>
      <p>{myTitle}</p>
    </div>
  );
}

export default Display;

原理说明 #

• React遵循单向数据流，父组件的状态myTitle更新后，会自动向下传递给所有依赖该状态的子组件（这里是Display），触发子组件重新渲染
• Selector组件通过调用父组件传递的setMyTitle方法，间接修改父组件的状态，避免了子组件直接修改父组件状态的反模式

内容的提问来源于stack exchange，提问作者Anthony The Nguyen