獲取JSON中的HTML以在React組件中呈現為HTML

Question

試圖弄清楚如何才能將鏈接實際呈現為鏈接。 現在，當我從我的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>
        )
    }
});

Answer 1

您可以dangerouslySetInnerHTML使用dangerouslySetInnerHTML

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

Example

Answer 2

我認為便宜的另一個選擇是NPM React插件

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

我已經用過，感覺很好。