Question

您好，谢谢您的宝贵时间。

在这里反应和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

您可以使用孩子代替这样做。您在此处传递的是字符串，因此您将在此处获取纯文本。因此您需要将ReactDOM.render更改为此：

sim_preds = converter.decode(preds.data, preds_size.data, raw=False)

，然后将您的mat = np.array([[0.4, 0, 0.6], [0.4, 0, 0.6]]) # TxC with T=2, C=3 classes = 'ab' # all chars in the order they appear in mat (without blank) res = BeamSearch.ctcBeamSearch(mat, classes, None) # decode it更改为此：

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

否则将其作为组件而不是字符串传递：

modal.js

Answer 2

尝试一下。您正在将EditorComponent作为字符串传递，而不是作为EditorComponent组件的实例传递。

childComponent={<EditorComponent />}

更新

选项2：

您不需要将EditorComponent作为实例传递，可以通过引用传递它。我实际上更喜欢这种方法，但这取决于具体情况。

索引：

childComponent={EditorComponent}

模式：

const {EditorComponent } = this.props

<Modal.Body><EditorComponent /></Modal.Body>

ReactJS-使JSX将props值识别为导入的类

2 个答案: