React.JS，如何从中呈现组件'的孩子

React.JS, how to render a component from it's child

本文关键字：组件 孩子 JS React      更新时间：2023-09-26

我正在尝试制作一个由两个相互调用的组件组成的嵌套树和

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

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

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

我想我可能理解你想要做什么。假设你有两个组件：

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>
    );
  }
});

而不是将它们作为依赖项相互包含并尝试渲染。

如果您使用的是父组件，即，我看不出问题

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

这不会有循环冲突。。

相关文章：