在道具中发送HTML标签-反应

Question

I need something function or trick to allow using HTML tags in react's props, because i'm using ckeditor for form.

my code:

render(){
    let name = this.props.name;
    let text = this.props.description;
    console.log(text);
    return (
        <li class="collection-item avatar">
          <span class="title"> <strong> {name} </strong> </span>
          <p > {text} </p>
          <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
        </li>
      )
  }
}

Answer 1

dangerouslySetInnerHTML might help you.

Example from doc:

function createMarkup() { return {__html: 'First · Second'}; };
<div dangerouslySetInnerHTML={createMarkup()} />

Always keep in mind that setting html directly can lead to XSS, so you should avoid the stuff as long as possible.