[英]How to globally style dynamic react data (dangerouslySetInnerHTML) with styled-components?
[英]React - Dynamic AJAX loading HTML data not working in dangerouslySetInnerHTML
我不能够动态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} />
)
}
}
有人可以帮我解决这个问题吗? 谢谢。
可能您必须指定组件生命周期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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.