将 props 传递给包装在 withRouter() 函数中的 React 组件

我正在使用 React-Router v4 在我的 React 应用程序中导航。下面是包裹在withRouter()函数使其能够在单击时更改路线：

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

正如你所看到的，我通过了props到组件，我需要它来更改组件的类。这里的问题是props is undefined in the <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 导航并仍然接收 props 的组件？

提前致谢。

问题是在解构时，你想要destructure props但你没有传递任何名为props to LogoName成分

你可以将你的论点更改为

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

但是，您仍然可以像@Danny 一样通过使用扩展运算符语法来解构道具，例如

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