React js在引导模式中显示动态html

Question

我正在尝试在 React JS 的 Bootstrap Modal 中显示无序列表，该列表是动态的。

我尝试过这种方式来实现，但它不起作用html元素显示为字符串

var ModalHeader = React.createClass({
 render: function () {
return (
  <div className="modal-header">
    {this.props.title}
    <button type="button" className="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
)
}});

var ModalBody = React.createClass({
render: function () {
return (
  <div className="modal-body">
    {this.props.content}
  </div>
)
}});

var ModalFooter = React.createClass({
render: function () {
return (
  <div className="modal-footer">
    <button type="button" className="btn btn-primary">Submit</button>
  </div>
)
}});

var Modal = React.createClass({
render: function () {
return (<div className="modal fade">
    <div className="modal-dialog">
      <div className="modal-content">
        <ModalHeader title="Modal Title"/>
        <ModalBody content = "<ul><li>Make</li><li>Hub</li><li>Market</li><li>Assembly type</li><li>Order Number</li></ul>" />
        <ModalFooter />
      </div>
    </div>
  </div>)
}});

var Button = React.createClass({
  showModal: function() {
$(this.refs.modal.getDOMNode()).modal();
},
render : function(){
return (
  <div>
    <button className="btn btn-default" onClick={this.showModal}>
        Show Modal
   </button>
    <Modal ref="modal" />
  </div>
);
 }});

React.render(<Button />, document.getElementById('container'));

是否有任何其他方法可以在 React JS 的 Bootstrap 模型/弹出窗口中显示动态 html。提前致谢。

Answer 1

正如stacks26 在comment 中指出的那样，dangerouslySetInnerHtml 是可用的，如果您有一个原始 HTML 字符串。您的 ModalBody 组件的 render 方法如下所示：

return (
  <div className="modal-body"
       dangerouslySetInnerHTML={{__html: this.props.content}} />
);

这可行，但伴随着这个道具名称所暗示的内在危险——你必须非常小心该 HTML 的所有来自哪里，以免你为跨站点设置自己脚本漏洞。

但是，在您的示例中，您的代码中逐字记录了模态内容。我不知道这是否只是为了说明目的，在您的真实用例中，呈现的 HTML 来自其他地方。但是如果您主要是在寻找一种向组件“提供内容”的方法，但不一定以原始 HTML 字符串的形式提供，还有更好的方法。

首先，prop 的值不必是字符串，它可以是任何 JavaScript 表达式——包括 JSX。所以这很好用：

<ModalBody content={<ul><li>Make</li><li>...</li></ul>} />

但更好的是，像这样的案例正是神奇的 children 道具的用途。这个道具接收你在打开和关闭 JSX 标记之间的任何内容。

因此，如果您在 ModalBody 中使用 children 属性而不是 content，如下所示：

return (
  <div className="modal-body">
    {this.props.children}
  </div>
);

然后像这样渲染你的Modal：

return (<div className="modal fade">
        <div className="modal-dialog">
          <div className="modal-content">
            <ModalHeader title="Modal Title"/>
            <ModalBody>
              <ul>
                <li>Make</li>
                <li>Hub</li>
                <li>Market</li>
                <li>Assembly type</li>
                <li>Order Number</li>
              </ul>
            </ModalBody>
            <ModalFooter />
          </div>
        </div>
      </div>)

那么您就是在表达<ul> 是<ModalBody> 的内容这一事实，它以更自然的方式将其括在标签之间。

您也可以使用ModalHeader 做同样的事情。

这是一个主要从您的问题中复制的 sn-p，但使用 props.children 作为模式的标题和正文：

var ModalHeader = React.createClass({
 render: function () {
return (
  <div className="modal-header">
    {this.props.children}
    <button type="button" className="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
)
}});

var ModalBody = React.createClass({
render: function () {
return (
  <div className="modal-body">
    {this.props.children}
  </div>
)
}});

var ModalFooter = React.createClass({
render: function () {
return (
  <div className="modal-footer">
    <button type="button" className="btn btn-primary">Submit</button>
  </div>
)
}});

var Modal = React.createClass({
render: function () {
return (<div className="modal fade">
    <div className="modal-dialog">
      <div className="modal-content">
        <ModalHeader>
          Modal Title
        </ModalHeader>
        <ModalBody>
          <ul><li>Make</li><li>Hub</li><li>Market</li><li>Assembly type</li><li>Order Number</li></ul>
        </ModalBody>
        <ModalFooter />
      </div>
    </div>
  </div>)
}});

var Button = React.createClass({
  showModal: function() {
$(this.refs.modal.getDOMNode()).modal();
},
render : function(){
return (
  <div>
    <button className="btn btn-default" onClick={this.showModal}>
        Show Modal
   </button>
    <Modal ref="modal" />
  </div>
);
 }});

ReactDOM.render(<Button />, document.getElementById('container'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="container"></div>