Reactjs 如何将道具通过路径传递到React中的组件

我有一个带有一些链接的标题组件，当点击链接后加载测试页面时，我想给它传递一个道具（它的值将来自标题页面中的状态）。目的是当标题页状态更新时，测试页将自动更新

App.js：

class App extends Component {    
  render() {
    return (
      <div>
        <Header />
        <div>        
            <Route exact path="/test" render={(props) => <Test {...props} myprop={"abc"} /> } />
        </div>
      </div>
    )
  }
}

类应用程序扩展组件{
render（）{
返回(
} />
)
}
}

Header.js：

class Header extends Component {
  render() {
    return (
      <div>
          <Link to="/test">
            Test Page
          </Link>
      </div>
    )
  }
}

类头扩展组件{
render（）{
返回(
测试页
)
}
}

---

我知道你可以根据我上面的代码很容易地从一条路线传递道具。myprop将在测试页面中可用，但我想以某种方式从标题动态设置myprop（可能链接是错误的机制？）这样它就可以知道更改并自动刷新-这可能吗？

您可以将道具保持在应用程序组件的状态，然后将其传递给标题和测试道具。标头还接收setState函数，以便能够修改它。以下是我的想象：

function App(){    
  let [someProp, setSomeProp] = useState();
  render() {
    return (
      <div>
        <Header prop={someProp} setProp={setSomeProp}/>
        <div>        
            <Route exact path="/test" render={(props) => <Test {...props} myprop={someProp} /> } />
        </div>
      </div>
    )
  }
}

函数App（）{
让[someProp，setSomeProp]=useState（）；
render（）{
返回(
} />
)
}
}

---

我希望这对你有用。自从去年在功能组件中添加了钩子以来，使用功能组件而不是类组件变得越来越流行。

谢谢，我通过您的建议实现了这一点。