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

Question

I'm trying to make a nested tree of two components calling each other and

I'm trying to make the following nested components tree

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

But I'm getting 'Option' undefined, I know that it's because OptionContents is loaded before Option which leads to the undefined error. But is there a way to acheive this?

Answer 1

I don't see the problem if you're using a parent component ie:

import Option
import OptionContents

render() {
   return (
      <Option>
        <OptionContents>
         <Option>
           <OptionContents>
           ...
           </OptionContents>
         </Option>
        </OptionContents>
      </Option>
   );
}

This wouldn't have a circular conflict afaik..

Answer 2

I think I might understand what you're trying to do. Assuming you have two components:

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

and

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

And you'd like to use and re-use them (nesting and so on), you should import them both into a component which will render them.

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

As opposed to include them in each other as dependencies and trying to render.