Question

我正在使用React-Router v4在我的React应用程序中导航。以下是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()传递给包含在customer manufacturer rating A Manuf_A 8 A Manuf_B 3 B Manuf_A 4 B Manuf_Y 3 C Manuf_X 3 C Manuf_Y 7 D Manuf_A 8 D Manuf_B 7函数内的组件，或者是否有类似的方法来创建一个能够使用React-Router导航的组件并仍然收到道具？

提前致谢。

Answer 1

问题在于，在进行解构时，您需要destructure props但是您没有将任何名为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>
));

Answer 2

你很接近，只是在你的功能签名中传播道具：

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

Answer 3

这对我有用：

import  {withRouter} from 'react-router-dom';
class Login extends React.Component
{
   handleClick=()=>{
      this.props.history.push('/page');
   }
   render()
  {
     return(
          <div>
          .......
            <button onClick={this.handleClick()}>Redirect</button>
          </div>);
  }
}

export default withRouter(({history})=>{
  const classes = useStyles();
    return (
        <Login  history={history} classes={classes} />
    )
});

将props传递给withRouter（）函数中包含的react组件

3 个答案: