Question

我有一个带有某些链接的标头组件，单击链接后加载“测试”页面时，我要为其传递一个道具（其值将来自标头页面的状态）。目的是当“标题”页状态更新时，“测试”页将自动更新。

App.js：

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

Header.js：

{status="", message="", token="", subscription_active=""}

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

Answer 1

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

我希望这对您有用。自从去年在功能组件中添加了钩子以来，使用功能组件代替类组件已变得更加流行。

如何通过路线传递道具到React中的组件

1 个答案: