Question

我试图在React JS的Bootstrap模式中显示无序列表，该列表是动态的。

我尝试过这种方式来实现，但是它不起作用，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 Model / Popup内部显示动态html吗？预先感谢。

Answer 1

如stacks26中指出的comment所示，如果您有原始HTML字符串，则dangerouslySetInnerHtml可用。您的ModalBody组件的render方法如下：

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

这可行，但是带有该道具名称所隐含的固有危险–您必须非常小心HTML的 all 的来源，以免您为跨站点设置脚本漏洞。

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

首先，道具的值不必是字符串，它可以是任何JavaScript表达式-包括JSX。这样就可以正常工作：

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

更好的是，像这样的情况正是children魔术道具的目的。这个道具会收到您在打开和关闭JSX标签之间所拥有的一切。

因此，如果您在children中使用content道具而不是ModalBody，就像这样：

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做同样的事情。

以下是大部分是从您的问题中复制的代码段，但使用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>

React js以Bootstrap模式显示动态HTML

1 个答案: