0
我正在學習React JS,並想讓我的手變髒。我正在學習構建簡單評論系統的文檔中的教程。添加圖像來反應組件
我已經按照該教程遵循類似的組件結構:
郵箱
- PostList
- 後
這裏是main.js :
var Post = React.createClass({
rawMarkup: function() {
var md = new Remarkable();
var rawMarkup = md.render(this.props.children.toString());
return {
__html: rawMarkup
};
},
render: function() {
return (< div className = "post" >
< h2 className = "commentTitle" > {
this.props.title
} < /h2> < span dangerouslySetInnerHTML = { this.rawMarkup() }/> < /div>
);
}
});
var PostList = React.createClass({
render: function() {
var postNodes = this.props.data.map(function(post) {
return (< Post title = {
post.title
} > By: {
post.by
} < img src = {
'placeholder_path'
}
/> </Post >);
});
return (< div className = "postList" > {
postNodes
} < /div>);
}
});
var PostBox = React.createClass({
loadPostsFromServer: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function(data) {
this.setState({
data: data
});
}.bind(this),
error: function(xhr, status, err) {
console.log("error " + data);
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
getInitialState: function() {
return {
data: []
};
},
componentDidMount: function() {
this.loadPostsFromServer();
setInterval(this.loadCommentsFromServer, this.props.pollInterval);
},
render: function() {
return (< div className = "postBox" >
< PostList data = {
this.state.data
}
/> </div >
);
}
});
ReactDOM.render(< PostBox url = "/api/posts"
pollInterval = {
2000
}
/>,
document.getElementById('content')
);
如何將圖像添加到Post組件?我得到了在瀏覽器中呈現爲[對象]?
爲什麼placeholder_path是引號之間?你看過生成的html,看看img html標籤的src值是什麼? – Caputo
你也需要在'postNodes'循環中'key'。 – activatedgeek
你用什麼來測試?使用降價編輯您的問題。 –