如何将组件对象传递给 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=""><LoginRecoverForm someprophere='' />
</ModalContainer>

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

Answer 2

尝试：

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

Answer 3

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

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

Answer 4

您可以简单地在标签之间插入组件。插入的组件将被视为默认的 children 道具。就像在这个示例代码中一样，<Container> 是我组件的父级，我正在尝试添加 <Routes>...</Routes> 作为它的子级。

const RouterProfile = () => {
    return(
        <Container>
            <Routes>
                <Route path="/" element={<ProfilePage />} />
            </Routes>
        </Container>
    )
}

现在，您可以在下面的代码中看到，子组件是使用我们从父组件收到的 children prop 调用的。或者您可以登录控制台并查看您收到的参数是什么。

const Container = ({children}) => {
    return(
        <div className="d-flex flex-column" style={{width:"100vw", height:"100vh"}}>
            <div class="flex-grow-1" style={{overflow : "scroll"}}>
                {children}
            </div>
        </div>
    )
}

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

How can I pass component object to container in React.js?

javascript

jsx

reactjs