时间戳

首页 > 解决方案 > 将道具传递给新的 URL/路由

reactjs - 将道具传递给新的 URL/路由

问题描述

我对 React 还很陌生，无法弄清楚如何做一些相当简单的事情（我假设）。我想将道具传递给从图表元素（它必须是这个元素）单击的新 URL。

我在一个页面上有一个图表，我已经为其分配了一个点击事件。

 <div id='plotlyContainer' className='dashboard-border-container'>
        { 
          toDrilldown &&
          <Redirect to={{
              pathname: '/portfolio/drilldown',
              state: {
                filters: this.props.filters,
                category: this.props.category,
                chartType: this.props.chartType
              }
            }}
          />
        }
        <Plot
          data={this.props.data}
          layout={this.props.layout}
          useResizeHandler={true}
          style={{width: '100%', height: '100%'}}
          onClick={this.navigateToDrillDownPage.bind(this)}
        />
      </div>

点击事件：

navigateToDrillDownPage() {
    this.setState({toDrilldown: true})
 }

如何将过滤器、类别和图表类型道具传递给新 URL (drillDownURL)？

标签： reactjsurlroutes

解决方案

我找到了解决方案，所以我认为它可能对其他人有所帮助。重定向状态对象是未定义的，直到我将组件包装在 (portfolio/drilldown) 中：

export default withRouter(PortDrillDownContainer)

包装后，反对的状态具有我预期的所有值。

推荐阅读