什麼是慣用的ReactJS方式來處理？初始？州？

作爲練習，我正在將a very, very simple video game從jQuery（重新）實現轉換爲我想成爲慣用的ReactJS。我（試圖）使用the React tutorial作爲我的參考。什麼是慣用的ReactJS方式來處理？初始？州？

jQuery重新實現將狀態存儲爲字符數組的數組。我目前正試圖讓初始狀態在ReactJS中呈現。最初我設置了getInitialState（）來返回最初返回的數據（一個數組數組）。這不起作用，因爲ReactJS似乎想要一個對象而不是數組（React.js: arrays and "Critical assumptions about the merge functions have been violated" error）。

的教程中，「教程10」一節中，使用Array.map（），這表明陣列包含某種程度可能會有所幫助：

現在的數據是在CommentList可用，讓我們渲染動態評論：

// tutorial10.js 
var CommentList = React.createClass({ 
    render: function() { 
    var commentNodes = this.props.data.map(function (comment) { 
     return (
     <Comment author={comment.author}> 
      {comment.text} 
     </Comment> 
    ); 
    }); 
    return (
     <div className="commentList"> 
     {commentNodes} 
     </div> 
    ); 
    } 
});

翻譯字符網格（目前實現爲數組數組）的最佳方法是什麼？我把數組放在this.state上（狀態可能會發生變化，所以我設置的是狀態而不是道具），然後是Array.map（）（或者二維）？

來源

2014-12-18 JonathanHayward

你能分享一些你正在使用的數據的樣本嗎？ –

什麼是地道ReactJS方式來處理？最初？州？

理想情況下，缺省的數據作爲支柱（一個或多個），以根組件通過。例如。

React.render(
    <MyApp gid={grid} />, 
    container 
);

然而，簡單地返回它形成getInitialState方法是細爲好。

最初我設置getInitialState（）返回最初返回的數據（一個數組數組）。沒有工作，因爲ReactJS似乎想的對象，而不是一個數組

只是讓你的數據狀態的一個方面：

getInitialState() { 
    return { 
    grid: this.props.grid 
    }; 
}

來源

2014-12-18 17:41:11

如果您使用ES2015 synax你可以在你直接在構造函數中初始化狀態：

constructor() { 
    super(); 
    this.state = {...} 
}

來源

2017-02-07 10:43:42

什麼是慣用的ReactJS方式來處理？初始？州？

回答

相關問題