在 Reactjs 中克隆组件的正确方法是什么？

Question

我是 React 的新手。我正在使用 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 个具有相同内容的不同组件还是 我应该创建 1 个组件，克隆它并将不同的道具传递为 以上

• 有没有办法一次渲染6个组件或者停止重新渲染 上一个？

这是我正在使用的：

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

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

抱歉没有提供完整的脚本！！！

Answer 1

发生这种情况是因为您在单个组件中有 6 个图表，并且当每个图表的状态发生更改时，它会重新渲染所有图表。

最好的方法是为你的图表创建一个子组件，并通过 props 传递你的数据、标题等，这样你就可以重用这个组件，重新渲染的问题就会得到解决。