javascript – 将props传递给withRouter()函数中包含的react组件

我正在使用React-Router v4在我的React应用程序中导航.以下是包含在withRouter()函数中的组件,以使其能够在单击时更改路由：

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

正如您所看到的,我将props传递给组件,我需要它来更改组件的类.这里的问题是在< 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} );
}

有没有办法让我将道具传递给包含在withRouter()函数内的组件,或者是否有类似的方法来创建一个能够使用React-Router导航并仍然接收道具的组件？

提前致谢.

解决方法:

问题是,在解构时,你想要构造道具,但你没有将任何名为props的道具传递给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>
));

标签：javascript,reactjs,react-router-v4
来源： https://codeday.me/bug/20190611/1217147.html