Javascript React JS-嵌套组件作为道具传递

我已经在ReactJS中编写了一个容器组件，并将一个道具传递给该组件，该组件将作为“主要”内容呈现，如下所示：

class RegistrationContainer extends Component {

    render() {
        const MainContent = this.props.mainContent;

        return (
            <Row>
                <Col offset="lg-3" lg={6}>
                    <MainContent />
                </Col>
            </Row>
        );
    }

}

export default RegistrationContainer;

我的问题是我想要

RegistrationEntryView

拥有道具，但似乎不知道如何在上面定义/传递道具。如果执行以下操作，则会出现错误：

class RegistrationCodeEntry extends Component {

    render() {
        const RegistrationView = <RegistrationEntryView someProp="blah" /> ;
        return (
            <RegistrationContainer mainContent={RegistrationView} />
        );
    }
}

export default RegistrationCodeEntry;

class RegistrationCodeEntry扩展组件{
render（）{
const RegistrationView=；
返回(
);
}
}
导出默认注册代码条目；

错误如下：

invariant.js？7313:42未捕获错误：元素类型无效：应为 字符串（用于内置组件）或类/函数（用于复合 组件）但得到：对象。检查的渲染方法

注册容器

---

这是

这个.props.children

可以解决的问题吗？我一直在努力理解这个概念，所以如果你能告诉我哪里出了问题，我将不胜感激。

你可以用

这个.props.children

像这样解决这个问题

class RegistrationCodeEntry extends Component {

  render() {
    return (
      <RegistrationContainer>
          // Render it as children
          <RegistrationEntryView someProp="blah" />
      </RegistrationContainer>
    );
  }
}

class RegistrationCodeEntry扩展组件{
render（）{
返回(
//把它当作孩子
);
}
}

然后在你的容器里

class RegistrationContainer extends Component {

  render() {

  const MainContent = this.props.mainContent;

  return (
    <Row>
      <Col offset="lg-3" lg={6}>
         // Render the passed children
        {this.props.children}
      </Col>
    </Row>
  );
 }
}

类注册容器扩展组件{
render（）{
const MainContent=this.props.MainContent；
返回(
//把经过的孩子们交出来
{this.props.children}
);
}
}

您的方法是正确的。你刚才在这里出错了：

<Row>
  <Col offset="lg-3" lg={6}>
    <MainContent />
  </Col>
</Row>

而是这样做：

<Row>
  <Col offset="lg-3" lg={6}>
    { MainContent }
  </Col>
</Row>

{MainContent}

我个人认为，这种方法比使用儿童更好

执行此操作时-

const RegistrationView=组件已呈现并转换为适当的格式。因此，不能使用
重新渲染它。
所以在这种情况下使用{}是正确的

祝你好运
 我认为
这个.props.children
可以解决你的问题。在
RegistrationCodeEntry
：
Return（）的
render（）方法中返回如下内容：谢谢，这正是我想要的。谢谢，这正是我想要的。
<Row>
  <Col offset="lg-3" lg={6}>
    { MainContent }
  </Col>
</Row>