Question

            <Link to={{
                          pathname: '/Client',
                          state: {
                            bvalue:"Book now"
                          }
                        }}>

                   <button 

                   onChange={(event) =>{
                    event.preventDefault();
                    this.setState={
                      bvalue:"Unavailable",
                      disable:true
                    }
                   }}
                   disabled={this.state.disable}

                  >book now</button></Link>

此代码在LandingPage组件中

const { bvalue} = this.props.location.state

以上代码在客户端组件的渲染功能中

现在显示错误

this.props.location未定义

Answer 1

您可以使用链接将状态/道具传递给其他组件

<Link to={{
  pathname: '/client',
  state: {
    flag: true
  }
}}>Client</Link>

并在将要渲染的目标组件中

const { flag } = this.props.location.state;

如果是功能组件

const { flag } = props.location.state

Answer 2

传递类似这样的内容。使用状态道具并传递必要的物品。在下面的示例中，沿链接传递了一个布尔值visibleFlag。

classes = SocialInteractionApplication.class

访问：

 <Link to={{
       pathname: '/Client',
       state: {
                visibleFlag: true
        }
  }}>
                   <button
                     onChange={(event) =>{
                       event.preventDefault();
                       this.setState({
                           bvalue:"Unavailable",
                           disable:true
                       })
                     disabled={this.state.disable}
                   >book now</button>
</Link>

与Router HOC一起使用以访问路由器道具

const { visibleFlag } = this.props.location.state

如何在React中使用链接和路由器将道具从一个组件传递到另一个组件

2 个答案: