我正在开发一个React演示应用程序,我有这个组件:
var MediaList = React.createClass({
displayName: 'MediaList',
getInitialState: function() {
return {
tweets: getTweets(numTweets)
};
},
render: function() {
var tweets = [];
for (var i = 0; i < this.props.tweets.length; i++) {
var tweet = this.props.tweets[i];
tweets.push({
key: tweet.id,
avatar: tweet.avatar,
name: tweet.name,
text: tweet.text,
favorites: tweet.favorites,
retweets: tweet.retweets
});
};
return (React.DOM.div(
React.DOM.button({
onClick: this.
changeAllTweets
}, " Change all tweets "),
React.DOM.button({
onClick: this.
changeRandomTweet
}, " Change one tweet "),
React.DOM.div({
className: "tweets-list"
},
React.DOM.h2(null, tweets.length, " tweets ", React.DOM.small(null, "Update rate ", interval, " seconds")),
React.DOM.ul({
className: "media-list"
},
this.state.tweets.sort(function(a, b) {
return calculateRating(b) - calculateRating(a);
}).map(renderRow)
)
)
));
},
changeAllTweets: function() {
var getTweetData = function() {
var nameStart = _.random(loremLen - 12);
return {
avatar: "http://playground.ahrengot.com/tweets/img/" + _.random(1, 6) + ".jpg",
name: lorem.substring(nameStart, _.random(nameStart + 5, nameStart + 12)),
text: lorem.substring(0, _.random(90, 140)),
favorites: _.random(0, 2000),
retweets: _.random(0, 500)
};
};
var tweets = [];
for (var i = 0; i < num; i++) {
var data = getTweetData();
data.id = i;
tweets.push(data);
};
this.setState({
tweets: tweets
});
},
changeRandomTweet: function() {
var tweets = this.state.tweets;
var randPosition = _.random(0, numTweets - 1);
tweets[randPosition].favorties = _.random(0, 5000);
tweets[randPosition].retweets = _.random(0, 1250);
this.setState({
tweets: tweets
});
}});
我感到困惑的是,其中一个按钮以及带有推文列表的div被渲染,但第一个按钮(更改所有推文)不是。这可能有什么问题?
答案 0 :(得分:1)
您需要将null
作为第一个参数传递给React.DOM.div
。
React.DOM.div( null,
React.DOM.button({ ... })
话虽如此,你应该考虑使用JSX。编写,读取和调试会更容易。