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

Posted 2023-03-05

【中文标题】React js在引导模式中显示动态html

【英文标题】：React js Display dynamic html in bootstrap modal

【发布时间】：2018-12-24 16:57:51

【问题描述】：

我正在尝试在 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。提前致谢。

【问题讨论】：

dangerouslySetInnerHTML 是您正在寻找的。在这里阅读reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

【参考方案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>