您好,感谢您抽出宝贵时间。
这里是 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 />
”作为纯文本。
我无法理解为什么会这样。在此先感谢您的帮助。
最佳答案
你可以使用 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'));
关于javascript - ReactJS - 让 JSX 将 Prop 值识别为导入类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51441331/