Question

我已经在ReactJS中编写了一个容器组件，并且正在将一个支柱传递给该组件，该组件将被呈现为＆＃39; main＆＃39;内容，如：

class RegistrationContainer extends Component {

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

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

}

export default RegistrationContainer;

我正在传递mainContent道具，如此：

import RegistrationContainer from './RegistrationContainer';
import RegistrationEntryView from './RegistrationEntryView';

class RegistrationCodeEntry extends Component {

    render() {
        return (
            <RegistrationContainer mainContent={RegistrationEntryView} />
        );
    }
}

export default RegistrationCodeEntry;

我的问题是我希望RegistrationEntryView拥有道具，但似乎无法弄清楚如何定义/传递道具。如果我执行以下操作，则会收到错误消息：

class RegistrationCodeEntry extends Component {

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

export default RegistrationCodeEntry;

错误如下：

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

这是this.props.children可以解决的问题吗？我一直在努力探索这个概念，所以对我出错的地方的任何建议都会受到赞赏。

Answer 1

您可以使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="list"> <li> <div class='item'> <div class="l-list"> <h3>some title</h3> <p>some description here</p> </div> <div class="r-list"> <span>02:45 PM</span> </div> </div> </li> </ul> <label>Title</label> <input id='title' type="text"> <label>description</label> <input id='description' type="text"> <input id='time' type="time"> <button id='submit' role="button">submit </button>这样解决此问题

this.props.children

然后在你的容器中

class RegistrationCodeEntry extends Component {

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

Answer 2

你的方法是正确的。你刚才错了：

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

而是这样做：

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

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

执行此操作时 - const RegistrationView = <RegistrationEntryView someProp="blah" /> ;组件已经呈现并转换为适当的格式。因此，您无法使用<MainContent />重新呈现它。因此在这种情况下使用{}是正确的。

祝你好运！

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

2 个答案: