Как получить данные в качестве реквизита внутри другого файла?

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

Мои обновления в этом коде и окне https://codesandbox.io/s/ymp6rrl199

Вы можете видеть, что я использую состояние, чтобы отобразить диаграмму с selectedRectangledateRange значение:

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

Состояние обновлено onClick по прямоугольнику: (App.js: 297)

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

Тогда доступ dateRange в chart.js с:

this.props.dateRange

Пожалуйста, используйте это состояние вместо всех forceUpdate() вы никогда не должны его использовать.