2017-05-10 1 views
1

을 표시되지 나는이 구성 요소를 가지고 :반작용 JS 버튼 내가 데모 응용 프로그램 반응 개발하고

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

어떤 버튼 중 하나뿐만 아니라이 트윗 목록 사업부 내부 얻을 수 있다는 것입니다에 대해 내가 혼란 스러워요 렌더링하지만, 첫 번째 버튼 (모든 트윗을 변경)하지 않습니다. 여기에 무엇이 잘못되었을 수 있습니까?

+1

미안 내가 도울 수는 없지만 : JSX를 한 눈에 – Aron

+1

에서 이해하고 자신에게 호의를 확인하고 사용하는 JSX을 쉽게 찾을 수 있습니다 – Chris

답변

1

당신은 React.DOM.div에 첫 번째 인수로 null을 통과해야합니다.

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

말했다되고, 당신은 JSX를 사용하여 조사한다. 쓰기, 읽기 및 디버그하는 것이 훨씬 쉬울 것입니다.

관련 문제