Fatal编程技术网
  • reactjs/
  • Reactjs 如何在react中实现可重用功能

Reactjs 如何在react中实现可重用功能

reactjs inheritance

Reactjs 如何在react中实现可重用功能,reactjs,inheritance,react-props,Reactjs,Inheritance,React Props,我是新手。我的代码结构如下所示： App - Calls - CallsChart - chart1 - chart2 - ... - Home - HomeCharts - chart3 - chart4 ... - filter bar - type bar - navigation bar 因此，每个仪表板

我是新手。我的代码结构如下所示：

App - Calls - CallsChart - chart1
                         - chart2
                         - ...
    - Home  - HomeCharts - chart3
                         - chart4 ...
    - filter bar
    - type bar
    - navigation bar
因此，每个仪表板（呼叫、主页…）内部都有条形图和图表。但当用户点击图表生成新的过滤器时，我需要这个值从chart1-CallsChart-Calls-App-filter栏传播。我在道具中传递这些参数。例如：

//get filter
clickFilter(filter){
    this.props.chartFilter(filter);
}
但我需要在上（下）的每一个层次上定义这些基本函数。如何使这些函数可重用？只定义一次并在每个仪表板中使用它们？我发现react没有继承性，但它使用组合。我不能这样做，因为我只是将一个参数传递给父组件。

react中的继承是由层次结构完成的，如果您需要将状态传播到其他组件，一个优雅的解决方案是将您的组件包装到一个有状态的父组件上。通过这种方式，您可以获取所需的所有数据，然后通过
道具
将其分发给其子级。正如Dupocas所说，您可以将所有组件封装在管理您的状态的顶级组件中。但是，如果这不是您对应用程序的首选项，则可以使用React-Redux将应用程序状态管理为仅由操作更改的单个状态。您可以在上了解更多信息。
因此，如果我理解正确，您建议创建一个“顶级”组件，其子组件将是Calls，Home。。。还是图表？你能给我举个例子吗？