Javascript React-动态AJAX加载HTML数据不在危险的HTML中工作

我无法在

危险的HTML

中动态加载AJAX加载的HTML格式数据（如下所述）（即，它在DOM中设置为相同的字符串，并且没有编译）。请注意，我正在使用AJAXAPI调用的

axios

插件。当我尝试在

危险的HTML

中静态提供相同的HTML数据时，它工作得非常好。我不知道那里发生了什么

[{id: 1, image: "assets/img/news-sm.png", content: "<p>சிறுவனே!</p>"}]

我的组件代码是

import React, { Component, PropTypes } from 'react';
import List from 'material-ui/List/List';
import ListItem from 'material-ui/List/ListItem';
import Divider from 'material-ui/Divider';
import { Media } from 'react-bootstrap';
import { map } from 'lodash';

class NewsList extends Component {
    constructor(props) {
        super(props);
    }

    handleListClick(d){
        console.log(d);
    }

    renderLoadingComponent() {
        return <ListItem style={{textAlign: 'center'}}>Loading...</ListItem>;
    }

    renderNothingFoundElement() {
        return <ListItem style={{textAlign: 'center'}}>Nothing found</ListItem>;
    }

    render() {
        const { data, loading } = this.props;

        return (
            <List className="list">
                {
                    map(data, (d, index) =>
                        React.Children.toArray([
                            <ListItem className="list-item">
                                <Media onClick={(ev) => this.handleListClick(d)} className="media-align">
                                    <Media.Left align="middle">
                                        <img width={75} height={56} src={d.image} alt="news-image"/>
                                    </Media.Left>
                                    <Media.Body>
                                        {d.content && <p dangerouslySetInnerHTML={{ __html: d.content }}></p>}
                                    </Media.Body>
                                </Media>
                            </ListItem>,
                            (index + 1) !== data.length ? <Divider /> : ''
                        ])
                    )
                }

                { loading ? this.renderLoadingComponent() : data.length === 0 ? this.renderNothingFoundElement() : '' }
            </List>
        )
    }
}

NewsList.propTypes = {
    data: React.PropTypes.array.isRequired
};

export default NewsList;

import React，{Component，PropTypes}来自'React'；
从“物料界面/列表/列表”导入列表；
从“物料界面/列表/列表项”导入列表项；
从“物料界面/分割器”导入分割器；
从“react bootstrap”导入{Media}；
从“lodash”导入{map}；
类NewsList扩展组件{
建造师（道具）{
超级（道具）；
}
手动单击（d）{
控制台日志（d）；
}
renderLoadingComponent（）{
返回装载。。。；
}
renderNothingFoundElement（）{
未发现任何东西，请返回；
}
render（）{
const{data，load}=this.props；
返回(
{
地图（数据，（d，索引）=>
反应，反应，反应([
this.handleListClick（d）}className=“媒体对齐”>
{d.content&&
}
,
（索引+1）！==data.length？：“”
])
)
}
{正在加载？this.renderLoadingComponent（）：data.length==0？this.renderNothingFoundElement（）：''}
)
}
}
NewsList.propTypes={
数据：React.PropTypes.array.isRequired
};
导出默认新闻列表；

我从另一个类似这样的组件调用上面的组件

import React, { Component, PropTypes } from 'react';
import NewsList from '../components/news-list';

class Home extends Component {
    constructor(props) {
        super(props);

        this.state = { ajaxData: [], ajaxLoading: false }
    }

    componentDidMount() {
        axios.get('/ajaxUrl')
            .then(response => this.setState({ajaxData: response.data}))
    }

    render() {
        return (
            <NewsList data={this.state.ajaxData} loading={this.state.ajaxLoading} />
        )
    }
}

import React，{Component，PropTypes}来自'React'；
从“../components/news list”导入新闻列表；
类Home扩展组件{
建造师（道具）{
超级（道具）；
this.state={ajaxData:[]，ajaxLoading:false}
}
componentDidMount（）{
get（“/ajaxUrl”）
.then（response=>this.setState（{ajaxData:response.data}））
}
render（）{
返回(
)
}
}

---

有人能帮我解决这个问题吗？谢谢。

您可能必须指定组件生命周期shouldComponentUpdate或forceUpdate或componentWillReceiveProps

但您也可以在父组件中使用huck并将state设置为“”，并在回调中设置NewList和pass道具

this.setState({newList: ''},()=> this.setState({ newList: <NewList {...props}/>}))

---

没有足够的代码。请显示整个组件，包括获取数据的代码。@RishatMuhametshin Hi。我已经编辑了这篇文章。你能看看这个，让我知道我是否应该补充更多吗？谢谢你的回答。我刚刚用完整的代码更新了整个帖子。你能给我更详细的回答代码吗？@Abrahamgnanasing试试这个。仍然没有编译相同的字符串。当我同时添加

shouldComponentUpdate

code时，它停止了渲染。请注意，通过Inspect元素中的网络，我的回答实际上是这样的

[{id:1，图片：“assets/img/news sm.png”，内容：“pசிறுவனே!/p“}]

。很抱歉。@AbrahamGnanasingh您是否尝试将一些不同的内容放入其中？请在新闻列表

componentDidUpdate（prevProp，prevState）{this.refs.news.innerHTML=this.props.ajaxData.content；}

和

class Home extends Component {
constructor(props) {
    super(props);

    this.state = { ajaxData: [], ajaxLoading: false, newsList:'' }
}

componentDidMount() {
    axios.get('/ajaxUrl')
        .then(response => this.setState({ajaxData: response.data},
()=> this.setState({newsList: <NewsList data={this.state.ajaxData} loading={this.state.ajaxLoading} />})))
 }

render() {
    return (
        <div> {this.state.newsList} <div/>
    )
}}

shouldComponentUpdate(nextProps, nextState) {
    return this.state.ajaxData != nextState.ajaxData;
  }