REACTJS-如何具有“良好的设计”-避免尝试从父级运行子级方法

问题描述

我开始使用ReactJS，并且我的设计有3层组件。

Dashboard component 
return(<>
   <Button>Refresh All</Button>

   <CustomChart dataChart={name:'test1',type:'pie',apiUrl:'https://abx'}></CustomChart>
   <CustomChart dataChart={name:'test2',type:'line',apiUrl:'https://xyz'}></CustomChart>
   <CustomChart dataChart={name:'test3',type:'bar',apiUrl:'https://tuv'}></CustomChart>
</>
--------------------------------------------------------------------------
CustomChart
const loadData = () => {
     //call apiUrl for get data and then set resp to dataChart
}

useEffect(()=>{
   loadData();
},[])

const renderChart = () => {
   switch (chartInfo.type) {
      case 'number':
           return (<NumberChart dataChart={dataChart} />)
      case 'pie':
           return (<PieChart dataChart={dataChart} />)
      case 'line':
            return (<LineChart dataChart={dataChart} />)
            break;
      }
}

return (<div >
  {dataChart && renderChart()}
</div>
)
--------------------------------------------------------------------------
Detail Chart (PieChartComponent,LineChartComponent,...)
//render chart with data from customChart

我知道在React中运行子方法不是一个好主意，我认为当我按下父组件中的刷新按钮时，我不应该调用loadData函数。

能帮我找到好的设计吗？

请原谅我的英语。

解决方法

在CustomChart组件中，您已经拥有所需的大部分代码，

useEffect(()=>{
   loadData();
},[])

useEffect的第二个参数（如果传递了道具）将仅在该道具更改时运行效果。 Read more here

所以需要做的是，在仪表板组件中存储上一次按下按钮的状态onButtonPress() { this.setState({lastPress: new Date().getTime()})，然后将lastPress向下传递给每个CustomChart道具，例如：

<CustomChart 
  updateTime={this.state.lastPress} 
  dataChart={{
    name: 'test1',type:'pie',apiUrl:'https://abx',}}
>
</CustomChart>

然后更新您的useEffect：

useEffect(()=>{
   loadData();
},[props.updateTime])