Reactjs React：高阶组件中嵌套的可重用组合组件

一段时间以来，我一直在努力解决这个问题。我已经拼凑出一个有效的解决方案，直到我得到任何嵌套的div，然后事情就崩溃了。基本上，我要做的是创建一个高阶组件中的组合组件，所有组件共享相同的当前状态。然后我需要导出它，以便任何文件都可以使用这些组件。下面是JSX可能的样子：

<Panel countersStartAt=5>
  <Counter incrementsBy=1 />
  <div>
    <Counter incrementsBy=2 />
  </div>
  <TotalCounter className="someclass" />
</Panel>

然后在我导出的Panel类之外：

export const Counter=（）=>null

就这样它暴露了计数器。默认呈现为null不会发生，因为我在面板中用this.Counter（）方法替换计数器

评论中提出的问题和需要考虑的其他事项


我没有使用Flux或Redux
假设面板代码片段在多个不实现通量模式或Redux的项目中的多个渲染方法中使用
假设这些代码片段无法重新编写
如何导出Panel、Counter和TotalCounter？因为Counter和TotalCounter是Panel类中的方法，所以可以这样做吗？我的研究结果是否定的，并创建了要导出的“虚拟”组件，以便当前文件可以使用它们而不会出错
在这里输入我们在聊天室中讨论的内容的答案

在没有Redux或Flux这样的数据管理框架的情况下，处理您想要做的事情的最佳方法是将数据作为道具传递，如下所示

class Panel extends Component {

    constructor(){
      super()
      this.state = {count: 5}
    }
    incrementCount = (incrementer) => {
      this.setState({count: this.state.count + incrementer});
    }
    render (){
      return (
        <div>
          <Counter incrementCount={this.incrementCount} count={this.state.count} incrementsBy=2 />
        </div>
      );
    }

}

类面板扩展组件{
构造函数（）{
超级（）
this.state={count:5}
}
递增计数=（递增者）=>{
this.setState（{count:this.state.count+incrementer}）；
}
渲染（）{
返回(
);
}
}

然后在你的柜台上

<someElement onClick={ (e) => {this.props.incrementCount(this.props.incrementsBy)} }>{this.props.count}</someElement>

{this.props.incrementCount（this.props.incrementsBy）}>{this.props.count}
您是否正在使用flux存储？您是否在询问如何实现您想要的功能？“是面板吗？@JohnRuddell是的，很抱歉不清楚。我已经实现了它，但是使用了类面板和内部的其他组件。然后，当我使用Panel时，我只是映射所有子项并设置状态，等等，但这绝对不是正确的解决方案。好的，您使用的是redux或flux之类的数据存储框架吗？@Rudice我没有使用flux存储。
<someElement onClick={ (e) => {this.props.incrementCount(this.props.incrementsBy)} }>{this.props.count}</someElement>