将道具传递给包裹在RouteRoute（）函数中的react组件

Question

我正在使用React-Router v4在我的React应用程序中导航。以下是包装在withRouter()函数中的组件，使它能够在单击时更改路线：

const LogoName = withRouter(({history, props}) => (
  <h1
    {...props}
    onClick={() => {history.push('/')}}>
    BandMate
  </h1>
));

如您所见，我将传递props给组件，以便更改组件的类。这里的问题props是undefined在<LogoName>组件中。单击另一个组件时，我需要能够更改此组件的类，如下所示：

<LogoName className={this.state.searchOpen ? "hidden" : ""} />
<div id="search-container">
  <SearchIcon
    onClick={this.handleClick}
    className={this.state.searchOpen ? "active" : ""} />
  <SearchBar className={this.state.searchOpen ? "active" : ""}/>
</div>

这是我处理点击的方法。基本上只是设置状态。

constructor(){
  super();
  this.state = {
    searchOpen: false
  }
}

handleClick = () => {
  this.setState( {searchOpen: !this.state.searchOpen} );
}

有没有办法让我传递props给包装在withRouter()函数内部的组件，或者有类似的方法来创建一个可以使用React-Router导航并仍然接收道具的组件？

提前致谢。

Answer 1

你已经很接近了，只需将 props 传播到你的函数签名中即可：

const LogoName = withRouter(({ history, ...props }) => (
  <h1
    {...props}
    onClick={() => {history.push('/')}}>
    BandMate
  </h1>
));

Answer 2

问题在于，在进行销毁时，您想要destructure props但没有传递任何命名props为LogoNamecomponent的prop

您可以将参数更改为

const LogoName = withRouter((props) => (
  <h1
    {...props}
    onClick={() => {props.history.push('/')}}>
    BandMate
  </h1>
));

但是，您仍然可以通过使用传播运算符语法（例如

const LogoName = withRouter(({history, ...props}) => (
  <h1
    {...props}
    onClick={() => {history.push('/')}}>
    BandMate
  </h1>
));