如何将数据作为其他文件中的道具？

Question

我有一个反应应用程序

我需要在chart.js上将arcsData更改为来自App.js>矩形数据的数据，它的onClick函数（App.js> 286）给出数据（data: {name: "XXXXXXXXXXXXX", DateRange: "January 2002 - April 2002", Duration: 0.3333333333332333}）。

在App.js矩形显示name: value我需要char.js从矩形数据显示DateRange: value。

要查看它，请单击蓝色圆圈>体验>，然后打开7个矩形>单击矩形时出现图表。

每次单击一个矩形，它都会获得新数据（可以在控制台上看到）。

谢谢。

Answer 1

我在这个codesandbox https://codesandbox.io/s/ymp6rrl199中的更新

您可以看到我使用状态来使用selectedRectangle dateRange值渲染图表：

<div id="chart">
     {this.state.selectedRectangle && (
         <Chart dateRange={this.state.selectedRectangle.DateRange} />
     )}
</div>

州在矩形上更新onClick :( App.js：297）

onClick={() => {
  this.setState({
    selectedRectangle: node.data
  });
}}

然后访问chart.js中的dateRange：

this.props.dateRange

请使用这样的状态而不是你所做的所有forceUpdate()，你永远不应该使用它。