javascript - 如何在其他文件中获取数据作为 Prop ？

Question

我有一个 React 应用程序

我需要在 chart.js 上将 arcsData 更改为来自 App.js 的数据 > 矩形数据，它的 onClick 函数 (App.js >286) 提供数据 (数据:{名称:“XXXXXXXXXXXXX”，日期范围:“2002 年 1 月 - 2002 年 4 月”，持续时间:0.3333333333332333}。

在 App.js 矩形中显示 name: value 我需要 char.js 从 rectangle data 中显示 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()，你不应该使用它。