做出反应。递归组件答案

【问题标题】：React. Recursive component做出反应。递归组件
【发布时间】：2017-06-27 17:34:48
【问题描述】：

有一个组件Child 递归调用自己。该组件还具有本地状态，例如，state = { isOpen: false }。这个Child 组件包装在Parent 组件中。因此，我们有一个带有递归生成的子组件（带有它们的本地状态）的父组件。问题是：如何访问特定的Child 组件以从Parent 组件调用 setState。或者我如何在Parent 中存储递归创建的组件状态。

有什么想法吗？

【问题讨论】：

我看不出递归会如何改变这种情况。您通常只需在父类上定义一个通过setState 更改状态的方法，然后将该方法向下传递给子类（在绑定它之后）。我认为递归不会改变任何事情。
@whs.bsmith 如果我在父状态isOpen 中声明属性并将此属性传递给子组件，这是否意味着isOpen 属性对于递归创建的所有子组件都是相同的?我错了吗？
如我所想，isOpen 对于所有Child 组件都是相同的。 codesandbox.io/s/0gm6Rr0DV。问题仍然悬而未决...
为什么不将 isOpen 作为 props 传递？
@AshKander 在那个例子中，我试图证明@whs.bsmith 解决方案对我不起作用。我正在寻找“解决方法”，如何管理来自父级的子递归组件，以将智能组件与哑巴分离。如果您有任何建议，请随时帮助我 :) P.S. 我将创建树视图结构并管理来自我的父组件的所有 onClick、onKeyPress、onDoubleClick 事件句柄。但是，如果我这样做，我将无法访问子组件内部为我提供展开/折叠功能的功能。

标签： reactjs recursion components

【解决方案1】：

我是这样做的：

const Asterics= ({i}) => [
  <b>*</b>,
  i>0 && <RAsterics i={i-1}/>
]
const RAsterics = (props)=><Asterics {...props}/>

export default Asterics

（反应

const Asterics= ({i}) => <div>
    <b>*</b>
    {i>0 && <RAsterics i={i-1}/>}
</div>
const RAsterics = (props)=><Asterics {...props}/>

然后，在您需要时：

<Asterics i={10}/>

【讨论】：