React js以Bootstrap模式显示动态HTML

Question

I am trying to display Unordered List inside the Bootstrap Modal in React JS , the list is dynamic.

I tried this way to achieve but it doesn't work the html elements appears as a string

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'));

Is there any other approach to display dynamic html inside Bootstrap Model/Popup in React JS . Thanks in advance.

Answer 1

As stacks26 pointed out in a comment , dangerouslySetInnerHtml is available if you have a string of raw HTML. Your ModalBody component's render method would look like this:

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

This works, but comes with the inherent danger implied by this prop's name – you have to be very careful where all of that HTML is coming from, lest you set yourself up for a cross-site scripting vulnerability.

However, in your example, you have your modal contents verbatim in your code. I don't know if that's just for illustration purposes, and in your real use case that rendered HTML is from elsewhere. But if you're mainly looking for a way to "give content" to a component, but it's not necessarily given as a raw HTML string, there are better ways.

First, a prop's value doesn't have to be a string, it can be any JavaScript expression – and that includes JSX. So this works fine:

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

But even better, cases like this are exactly what the magic children prop is made for. This prop receives whatever you have between your opening and closing JSX tags.

So if you use the children prop instead of content in your ModalBody , like this:

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

and render your Modal like this:

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>)

then you're expressing the fact that the <ul> is the content of the <ModalBody> in a much more natural way, by enclosing it between tags.

You can also do the same thing with the ModalHeader .

Here's a snippet that's mostly copied from your question, but uses props.children for header and body of the modal:

 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>