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

Question

我的目标是在多个组件中重用 Bootstrap 中的模态。我有一个问题，如何将组件传递给容器？

   <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

尝试:

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