在Reactjs中克隆组件的正确方法是哪一种？

Question

我是个新手。我正在使用react chartjs-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个内容相同的不同组件，还是应该创建一个组件，克隆它并传递不同的道具，如上面所示，
• 是否有任何方法可以一次呈现6个组件或停止重新呈现之前的组件？

在这里，我使用的是：

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

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

很抱歉没有提供完整的剧本！

Answer 1

这是因为在一个组件中有6个图表，当每个图表的状态发生变化时，它将重新呈现所有的图表。

最好的方法是为图表创建一个子组件，并通过道具传递数据、标题等，这样您就可以重用该组件，并解决重呈现问题。