将字符串从 api 解析为 html

Question

我有 api 调用将 10 个对象的集合设置为状态数组。以下是该代码的示例：

class Example extends Component {

    constructor(props) {
        super(props);
        this.state = {
            quiz_data: [],

            quiz_answers:[]
        }
    }

    componentDidMount() {
        Axios.get('api call here')
            .then(response => {
                this.setState({ 'quiz_data': response.data });
            })
    }

然后，我像这样映射该状态数组：

this.quizData = this.state.quiz_data.map((item, id) => {
                return (
                    <div key={id}>
                        <h3 className='quiz-question'>{item.Title}</h3>
                        <p>{item.Question}</p>
                    </div>
                )
})

我的问题/问题是，item.question 作为数组中的字符串返回，并以这种方式出现。

所以我最终得到了带有代码的示例文本，而不仅仅是

示例文本

。

如何让它返回为 html 而不是字符串？

Answer 1

为什么不尝试将 html 设置为危险阅读 here

this.quizData = this.state.quiz_data.map((item, id) => {
                return (
                    <div key={id}>
                        <h3 className='quiz-question'>{item.Title}</h3>
                       <div dangerouslySetInnerHTML={{__html:item.Question}} /> 
                    </div>
                )
})