Как правильно клонировать компонент в Reactjs?

Question

Я новичок ie, чтобы Реагировать. Я использую реагирующий график js -2 для создания линейного графика. Существует 6 различных типов данных с одинаковой структурой. Я создал один компонент Линейный график и клонировал 5 других. Затем я передал данные следующим образом:

let liveChart1 = <LiveChart1
                        name= {t('chart.30min')}
                        segmentType = {30}
                        currentTime={this.state.currentTime30}
                        predictedTime={this.state.predictedTime30}
                        density={this.state.density30}
                        predictedValue={this.state.predictedValue30}
                        same_anchor_params={this.state.same_anchor_params30}
                        prev_anchor_params={this.state.prev_anchor_params30}
                        historyData={this.state.historyData30}  
                        isFirst={this.state.isFirst}
                    />

Когда он рендерит и обновляет данные, он мигает 6 раз из-за 6 графиков. У меня две проблемы:

• Должен ли я создать 6 разных компонентов с одинаковым содержимым или я должен создать 1 компонент, клонировать его и передать разные реквизиты, как указано выше

• Есть ли какие-либо методы для визуализации 6 компонентов одновременно или прекращения повторной визуализации предыдущего?

Вот что я использую:

let charts = [
  liveChart1, liveChart2, liveChart3, liveChart4, liveChart5, liveChart6
];

{
  charts.map((element, index) => {
    return (<React.Fragment>{element}</React.Fragment>)
  })
}

Извините за непредоставление всего сценария !!!

Answer 1

Это происходит из-за того, что у вас есть 6 диаграмм в одном компоненте, и когда состояние каждой диаграммы изменяется, она перерисовывает все диаграммы.

Лучший способ - создать один дочерний компонент для вашей диаграммы и передайте данные, заголовок и т. д. через реквизиты, чтобы вы могли повторно использовать этот компонент, и проблема повторного рендеринга будет решена.