获取 JSON 中的 HTML 以在 React 组件中呈现为 HTML答案

【问题标题】：Get HTML in JSON to render as HTML in React Component获取 JSON 中的 HTML 以在 React 组件中呈现为 HTML
【发布时间】：2016-10-14 07:16:33
【问题描述】：

试图弄清楚如何让链接实际呈现为链接。现在，在我从 Json 文件中读取这行文本后，react 将超链接呈现为文字文本，而不是将其呈现为链接。

someData.json

[{
    "about":   "John has a blog you can read <a href=\"http://www.john.com/blog/\" target=\"_blank\">here</a>."
}]

someComponent.js

const Person = Component({
    store: Store('/companies'),
    render(){
        var company = this.store.value()[this.props.companyId];

        return (
            <div id='ft-interviewee className="all-100"'>
                <p className="section-heading bold padding-top-20 font-22">Person</p>
                <div className="column-group horizontal-gutters">
                    <div className="all-10">
                        <div>{company.people.person.about}</div>
                    </div>

            </div>
        )
    }
});

【问题讨论】：

您不能在img 标签的src 属性内放置锚标签...
废话，等一下

标签： javascript json reactjs

【解决方案1】：

您可以使用dangerouslySetInnerHTML

<div dangerouslySetInnerHTML={ { __html: company.people.person.about } }></div>

Example

【讨论】：

【解决方案2】：

另一个我认为便宜的选择是 NPM React 插件

https://www.npmjs.com/package/react-html-parser

我用过，感觉不错。

【讨论】：

使用额外的包而不是 dangerouslySetInnerHTML 看起来有点矫枉过正。
甚至我都不知道。它的 2 岁评论