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

У меня есть приложение для реагирования

Мне нужно на 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 прямоугольников> при нажатии на прямоугольник появится диаграмма.

Каждый раз, когда щелкаешь прямоугольник, он получает новые данные (видно на консоли).

Спасибо.


reactjs javascript react-props d3.js
person Vahagn    schedule 02.03.2018    source источник
comment
Попробуйте опубликовать минимальный, полный и проверяемый пример и переформулируйте свой вопрос.   -  person Dyo    schedule 02.03.2018
comment
Спасибо, я переформулировал вопрос.   -  person Vahagn    schedule 02.03.2018
comment
Итак, что вы хотите сделать со значением DateRange?   -  person Dyo    schedule 02.03.2018
comment
, чтобы дать значение DateRange для chart.js   -  person Vahagn    schedule 02.03.2018
comment
но я добился результата, я переместил дату внутри класса. Спасибо.   -  person Vahagn    schedule 02.03.2018

Ответы (1)


arrow_upward
1
arrow_downward

Мои обновления в этом 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
  });
}}

Затем получите доступ к dateRange в chart.js с помощью:

this.props.dateRange

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

person Dyo    schedule 02.03.2018