React中如何通过Route动态传props并实现组件自动更新

当然可行！核心问题是现在Header和Test是兄弟组件，没有直接的状态关联，咱们只需要把状态提升到它们的共同父组件App里，就能实现动态传值和自动刷新的效果。具体做法如下：

• 把状态移到App组件统一管理
  把原本要放在Header里的状态，放到App中，同时写一个更新状态的方法，用来让Header能修改这个状态：

  class App extends Component {
    // 初始化共享状态，初始值可以根据你的需求设置
    state = {
      myprop: "abc"
    };
  
    // 用来更新状态的方法，会传给Header组件
    updateMyProp = (newValue) => {
      this.setState({ myprop: newValue });
    };
  
    render() {
      return (
        <div>
          {/* 把更新方法和当前状态传给Header */}
          <Header updateMyProp={this.updateMyProp} currentProp={this.state.myprop} />
          <div>
            {/* 把App的状态作为props传给Test，这样Test能拿到最新值 */}
            <Route 
              exact path="/test" 
              render={(props) => <Test {...props} myprop={this.state.myprop} /> } 
            />
          </div>
        </div>
      )
    }
  }
  

• 修改Header组件，让它能更新父组件状态
  在Header里，你可以通过用户操作（比如按钮点击、输入框变化）调用父组件传来的updateMyProp方法，修改共享状态：

  class Header extends Component {
    // 举个例子：点击按钮更新状态
    handlePropUpdate = () => {
      // 这里可以换成你实际的动态值，比如输入框的内容
      this.props.updateMyProp("我是Header动态设置的值！");
    };
  
    render() {
      return (
        <div>
          {/* 可选：显示当前状态值，方便调试 */}
          <p>当前状态值：{this.props.currentProp}</p>
          {/* 触发状态更新的操作，比如按钮 */}
          <button onClick={this.handlePropUpdate}>更新参数</button>
          <Link to="/test">Test Page</Link>
        </div>
      )
    }
  }
  

• 确保Test组件能响应props变化
  Test组件只需要接收myprop这个props，当App的状态更新时，Test的props会自动变化，React会自动重新渲染组件。如果需要在props变化时做额外逻辑，可以用componentDidUpdate钩子：

  class Test extends Component {
    render() {
      return (
        <div>
          <h1>Test页面</h1>
          <p>从Header传来的参数：{this.props.myprop}</p>
        </div>
      )
    }
  
    // 可选：当props变化时执行自定义逻辑
    componentDidUpdate(prevProps) {
      if (prevProps.myprop !== this.props.myprop) {
        console.log("参数更新了！新值是：", this.props.myprop);
        // 比如这里可以做数据请求、状态重置等操作
      }
    }
  }
  

为什么这样能生效？ #

• 状态提升到App后，Header修改的是父组件的状态，App的state更新会触发自身重新渲染；
• Test的myprop直接绑定到App的state，所以状态变化时，Test的props会同步更新，React会自动重新渲染Test组件，实现你要的“自动刷新”效果。

如果你的项目比较复杂，也可以用Redux、Mobx这类状态管理工具，但对于这个场景，用React原生的状态提升就足够简单高效了。

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