哪个是在Reactjs中克隆组件的正确方法?

问题描述 投票:0回答:1

我是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>)
  })
}

很抱歉没有提供完整的脚本!

reactjs react-chartjs
1个回答
0
投票

之所以这样,是因为单个组件中有6个图表,并且当每个图表的状态更改时,它都会重新呈现所有图表。

最好的方法是为图表创建一个子组件,并通过道具传递数据,标题等,以便您可以重用此组件,并且将解决重新呈现的问题。


0
投票

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

使用React.cloneElement()

只需更改每个图表的React.cloneElement()(第二个参数)。>>

props
© www.soinside.com 2019 - 2024. All rights reserved.