反應-動態AJAX加載HTML數據無法在危險中工作

Question

我不能夠動態AJAX在加載HTML格式的數據（如下文所述） dangerouslySetInnerHTML （即，它是在DOM為相同的字符串設定，而不是編譯）。 請注意，我正在使用axios插件進行AJAX API調用。 當我嘗試使用相同的HTML數據靜態地在dangerouslySetInnerHTML SetInnerHTML中時，它運行良好。 我不知道那里發生了什么。

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

我的React Component代碼是

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 } 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} />
        )
    }
}

有人可以幫我解決這個問題嗎？ 謝謝。

Answer 1

可能您必須指定組件生命周期shouldComponentUpdate或forceUpdate或componentWillReceiveProps facebook.github.io

但是，您還可以在父組件中使用huck並將狀態設置為”，並在回調中設置NewList並傳遞道具

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

更新簡單的一個

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;
  }