React JS按钮没有显示出来

时间:2017-05-10 19:29:00

标签: javascript reactjs

我正在开发一个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被渲染,但第一个按钮(更改所有推文)不是。这可能有什么问题?

1 个答案:

答案 0 :(得分:1)

您需要将null作为第一个参数传递给React.DOM.div

React.DOM.div( null,
   React.DOM.button({ ... })

话虽如此,你应该考虑使用JSX。编写,读取和调试会更容易。