在reactjs中显示字符串中的html答案

【问题标题】：Showing html from string in reactjs在reactjs中显示字符串中的html
【发布时间】：2017-07-30 06:31:05
【问题描述】：

如何使用js在html页面中显示json字符串中的html

到目前为止的代码：

function RequestNoteItem(props) {
    return(
        <li className={ props.isAdmin == 1 ? "out" : "in"} >
            <div className="message" style={props.isAdmin==1 ?   {marginRight: 0} : {marginLeft: 0} }>
                <span className="arrow"> </span>
                <a  href="#" className="name"> {props.username} </a>
                <a onClick={props.onDelete} id={props.id}  style={{color:'red'}} className={ props.isAdmin == 1 ? "pull-left" : "pull-right"}>✖</a>

                <span className="datetime"> {props.time}</span>
                <span className="body"  style={{maxWidth:900+'px'}}> {props.content } </span>
            </div>
        </li>
    )
}

JSON：

note: "<a href=/system/web/email//request-packagedefault/index?id=42 >Email</a> sent to Karim with some attachments and follwing packages: - <a href=/system/web/request/request-package?id=1 >wefwef</a>- <a href=/system/web/request/request-package?id=2 >w ferg</a>- <a href=/system/web/request/request-package?id=3 >rthrth</a>- <a href=/system/web/request/request-package?id=4 >ewrgwergerg</a>",

【问题讨论】：

你能提供一些你有的代码吗？
@spirift 我正在使用 react js 这是包含照片中上述视图的组件
什么是 JSON 字符串以及您希望输出的样子
@ShubhamKhatri 我更新了我的问题，这是我从 json 获得的字符串，我想显示 html 链接
你得到的字符串不是JSON字符串

标签： javascript html json reactjs

【解决方案1】：

使用dangerouslySetInnerHTML属性渲染html字符串，

来自Doc：

dangerouslySetInnerHTML 是 React 在浏览器 DOM。

检查这个例子：

var string = "<a href='#'>abc</a>";

class App extends React.Component{

  render(){
  
    return(
      <div>
          <div dangerouslySetInnerHTML={{ __html: string   }}></div>
      </div>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'></div>

【讨论】：