时间戳

首页 > 解决方案 > 在 Reactjs 中克隆组件的正确方法是什么？

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

问题描述

我是 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 次。我有两个问题：

这是我正在使用的：

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

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

很抱歉没有提供整个脚本！！！

标签： reactjsreact-chartjs

解决方案

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

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

推荐阅读