如何将组件对象传递给React.js中的容器？

Question

我的目标是在多个组件中重复使用模态。我有一个问题，我怎样才能将组件传递给容器？

<ModalContainer 
     title="Password recovery" 
     body="<LoginRecoverForm someprophere='' />" 
    /> 

这给出了一个错误：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `ModalLoginRecover`. 

下面是简单的容器：

import { Modal } from 'react-bootstrap/lib/' 
var React = require('react') 

var ModalContainer = React.createClass({ 

    getInitialState() { 
    return { showModal: true }; 
    }, 

    close() { 
    this.setState({ showModal: false }); 
    browserHistory.push('/login'); 
    }, 

    open() { 
    this.setState({ showModal: true }); 
    }, 

    render: function() { 
    return (
    <div> 
     <Modal show onHide={this.close}> 

     <Modal.Header closeButton> 
      <Modal.Title>{this.props.title}</Modal.Title> 
     </Modal.Header> 

     <Modal.Body> 
      {this.props.body} 
     </Modal.Body> 

     </Modal> 
    {this.props.children} 
    </div> 
)}}); 

module.exports = ModalContainer; 

下面是简单的组件：

import {Modal, HelpBlock, FormGroup, Button, FormControl } from 'react-bootstrap/lib/' 
var React = require('react'); 
import { Router, ReactRouter, browserHistory } from 'react-router'; 

var ModalContainer = require('../../containers/ModalDialog') 

function FieldGroup({ id, help, type, placeholder }) { 
    return (
    <FormGroup controlId={id}> 
     <FormControl type={type} placeholder={placeholder} /> 
     {help && <HelpBlock>{help}</HelpBlock>} 
    </FormGroup> 
); 
} 

function LoginRecoverForm(){ 

    return (
    <form method="POST" action=""> 
    <FieldGroup 
     id="formControlsEmail" 
     type="email" 
     placeholder="Enter your E-mail" 
    /> 

    <Button type="submit">Recover!</Button> 

    </form> 
)}; 

var ModalLoginRecover = React.createClass({ 
    render: function() { 
     return (
      <div> 
       <ModalContainer 
       title="Password recovery" 
       body="<LoginRecoverForm someprophere='' />" 
       /> 
      </div> 
)}}); 

module.exports = ModalLoginRecover; 

Answer 1

由于JSX只是JavaScript中，你可以把它当作道具，就像任何JS表达：

<ModalContainer 
    title="Password recovery" 
    body={<LoginRecoverForm someprophere=""/>} 
/> 

Answer 2

你可以做的是通过组件作为像这样的孩子：

<ModalContainer 
     title="Password recovery" 
     body=""><LoginRecoverForm someprophere='' /> 
</ModalContainer> 

阵营将投入LoginRecoveryForm组件在{this.props.children}的地方在ModalContainer

Answer 3

尝试：

<ModalContainer 
     title="Password recovery" 
     body={(() => {return <LoginRecoverForm someprophere='' />})()} 
    />