reactjs - 如何在 React 中通过 Route 将 props 传递给组件

Question

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

应用程序.js：

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

页眉.js：

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

我知道您可以按照我上面的代码轻松地从路线传递道具，即。myprop 将在 Test 页面中可用，但我想以某种方式从 Header 动态设置 myprop （也许 Link 是错误的机制？），以便它会知道更改并自动刷新 - 这可能吗？

标签： reactjsreact-router

Answer 1

您可以将道具保存在 App 组件的状态中，然后将其传递给 Header 和 Test 道具。并且 Header 还接收 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>
    )
  }
}

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