javascript - ReactJS - 让 JSX 将 Prop 值识别为导入类

Question

您好，感谢您抽出宝贵时间。

这里是 React 和 JS 新手。

我正在使用两段代码:

index.js

import React, { Component } from 'react'; im
import ReactDOM from 'react-dom';
import './index.css';
import Modals from "./Modal";
import EditorComponent from './Editor';

ReactDOM.render(<Modals childComponent="<EditorComponent />" />, document.getElementById('root'));

Modal.js

import React, {Component} from 'react';
import EditorComponent from './Editor';
import { Modal } from 'react-bootstrap';
import { Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

 class Modals extends Component {


    render() {

        return (
            <div className="static-modal">
              <Modal.Dialog>
                <Modal.Header>
                  <Modal.Title>Journey onward...</Modal.Title>
                </Modal.Header>

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

                <Modal.Footer>
                  <Button>Close</Button>
                  <Button bsStyle="primary">Save changes</Button>
                </Modal.Footer>
              </Modal.Dialog>
            </div>
        );
    }
}

export default Modals;

问题

如果我要替换 {this.props.childComponent}在 Modal.js 中使用 <EditorComponent /> ，类被成功调用。然而，当从 index.js 传递时，如上面的代码所示，Modal 被成功调用，但正文内容中只有“<EditorComponent />”作为纯文本。

我无法理解为什么会这样。在此先感谢您的帮助。

Answer 1

你可以使用 child 而不是这样做。你在这里传递的是字符串，所以你在那里得到纯文本。所以你需要将 ReactDOM.render 更改为:

ReactDOM.render(<Modals><EditorComponent/></Modals>, document.getElementById('root'));

并将您的 modal.js 更改为:

    import React, {Component} from 'react';
import EditorComponent from './Editor';
import { Modal } from 'react-bootstrap';
import { Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

 class Modals extends Component {


    render() {

        return (
            <div className="static-modal">
              <Modal.Dialog>
                <Modal.Header>
                  <Modal.Title>Journey onward...</Modal.Title>
                </Modal.Header>

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

                <Modal.Footer>
                  <Button>Close</Button>
                  <Button bsStyle="primary">Save changes</Button>
                </Modal.Footer>
              </Modal.Dialog>
            </div>
        );
    }
}

export default Modals;

或者将其作为组件而不是字符串传递:

ReactDOM.render(<Modals childComponent={<EditorComponent />} />, document.getElementById('root'));