Question

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

   <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='' />})()}
   />

Answer 2

您可以做的是像小孩一样传递组件：

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

React会将LoginRecoveryForm组件放在ModalContainer中{this.props.children}的位置

Answer 3

由于JSX只是javascript，你可以将它作为props传递，就像任何JS表达式一样：

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

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

3 个答案: