如何在react中做可重用功能

Question

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

App - Calls - CallsChart - chart1
                         - chart2
                         - ...
    - Home  - HomeCharts - chart3
                         - chart4 ...
    - filter bar
    - type bar
    - navigation bar

因此，每个仪表板（“呼叫”，“主页” ...）内部都有条形图。但是，当用户单击图表以生成新的过滤器时，我需要此值从chart1-CallsChart-Calls-App-过滤器栏传播。我在道具中传递了这些参数。例如：

//get filter
clickFilter(filter){
    this.props.chartFilter(filter);
}

但是我需要在向上（和向下）的每个级别上定义这些基本功能。如何使这些功能可重用？仅定义一次，并在每个仪表板中使用它们？我发现react没有继承，但是使用了组合。我做不到，因为我只是将参数传递给父对象。

Answer 1

正如Dupocas所说，您可以将所有组件包装在管理您的状态的顶级组件中。但是，如果那不是您对应用程序的偏好，则可以使用React Redux将应用程序状态作为仅由操作更改的单个状态进行管理。您可以在Using React Redux了解更多信息。

Answer 2

react的继承是通过层次结构来完成的，如果您需要将状态传播到其他组件，则一种优雅的解决方案是将您的组件包装在有状态的父组件上。这样，您可以获取所需的所有数据，然后通过props分发给它的子级。