javascript - React.JS，如何从子组件渲染组件

我正在尝试使两个相互调用的组件的嵌套树
 和

我正在尝试制作以下嵌套组件树

<Option>
  <OptionContents>
   <Option>
     <OptionContents>
     ...
     </OptionContents>
   </Option>
  </OptionContents>
</Option>

但是我得到的“选项”未定义，我知道这是因为OptionContents在Option之前加载，导致未定义的错误。但是有没有办法做到这一点？

最佳答案

我想我可能会理解您正在尝试做什么。假设您有两个组成部分：

var Option = React.createClass({
  render: function() {
    return (<li>{this.props.children}</li>);
  }
});

和

var OptionContents = React.createClass({
  render: function() {
    return (<div>{this.props.children}</div>);
  }
});

而且，您想使用和重复使用它们（嵌套等），则应将它们都导入将呈现它们的组件中。

// import Option
// import OptionContents
var App = React.createClass({
  render: function() {
    return (
      <Option>
        <OptionContents>
         <Option>
           <OptionContents>
           ...
           </OptionContents>
         </Option>
        </OptionContents>
      </Option>
    );
  }
});

而不是将它们彼此作为依赖项并尝试呈现。