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

【问题标题】：React: Nested Reusable Composition Components within a Higher Order ComponentReact：高阶组件中的嵌套可重用组合组件
【发布时间】：2016-10-09 14:45:00
【问题描述】：

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

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

所以我希望这样的工作方式是我有这个包装面板组件，它设置一些初始状态，比如 this.state.start = 5。在面板中，计数器组件将有一个 onClick 处理程序来增加状态.从增量开始。 TotalCounter 将是一个显示 state.start 的组件。当然，这是一个人为的例子，所以最好不要提出我如何使这个特定组件更好。我希望将其应用于更现实的情况。

第二件事是如何导出这些组件，以便我可以在无状态组件内的单独文件中创建上面的确切代码。希望这是有道理的。

这是我为实现这一目标所做的工作。

  renderChildren = (children) => {
    return React.Children.map(children, (child) => {
      if (React.isValidElement(child)) {
        return React.createElement(
          (child.type.name ? this[child.type.name] : child.type),
          child.props
        );
      }
      return child;
    });
  };

  render = () => {
    return (
        {this.renderChildren(this.props.children)}
    )
  };

然后在 Panel 类之外我像这样导出：

export const Counter = () => null;

就这样它暴露了计数器。 null 的默认渲染不会发生，因为我将 Counter 替换为 Panel 中的 this.Counter() 方法。

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

我没有使用 Flux 或 Redux
假设 Panel 代码 sn-p 用于多个未实现 Flux 模式或 Redux 的项目的多个渲染方法中
假设那些代码 sn-ps 不能重写
如何导出 Panel、Counter 和 TotalCounter？是否可以对 Counter 和 TotalCounter 执行此操作，因为它们是 Panel 类中的方法？我的研究导致没有，并创建要导出的“虚拟”组件，以便当前文件可以使用它们而不会出错。

【问题讨论】：

你在使用助焊剂商店吗？
你在问如何实现你想要的吗？又名面板？
@JohnRuddell 是的，很抱歉不清楚。我已经实现了它，但是使用了一个类 Panel 和里面的其他组件。然后，当我使用 Panel 时，我只是映射所有子项并设置状态等，但这绝对不是正确的解决方案。
好的，您是否使用任何数据存储框架，例如 redux 或 Flux？
@ryudice 我没有使用助焊剂商店。

标签： reactjs components composite-component higher-order-functions

【解决方案1】：

在这里回答我们在聊天室里谈论的内容

在没有像 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>
      );
    }

}

然后在你的柜台..

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

【讨论】：