關於更新ReactJS中的道具

與SO有關的許多帖子無法更新ReactJS中的道具。例如。 this one。關於更新ReactJS中的道具

在所涉及的崗位給出解釋，這是ReactJS哲學的一部分，有助於調試等也this answer（在同一個線程）顯示了它是如何內ReactJS完成（通過使用Object.freeze）。

我ReactJS新手，所以放在一起這個小例子來試試，看看會發生什麼，當一個人試圖修改道具（也jsfiddle）

<!doctype html> 
<html> 
    <body> 
    <div id='react-app'></div> 
    <script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"></script> 
    <script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script> 
    <script type='text/javascript'> 
    var rce = React.createElement.bind(React); 
    var TodoList = React.createClass({ 
     propTypes: { 
     todos: React.PropTypes.arrayOf(React.PropTypes.string).isRequired, 
     }, 
     render: function() { 
     var props = this.props; 
     var todos = this.props.todos; 
     var self = this; 
     return rce('div', {} 
        ,rce('ul', {} 
         , (function(){ 
         return todos.map(function(x, i) { 
          return rce('li', {key: i}, x); 
         });})()) 
      ,rce('button', {onClick: function() { 
       // delete props.todos;   // fails 
       // props.todos = [];   // fails 
       todos.splice(0, todos.length); // succeeds 
       console.log(todos); 
       self.forceUpdate(); 
      }}, 'clear all')); 
     } 
    }); 
     var todoList = rce(TodoList, {todos: ['walk dog', 'feed cat', 'water flowers']}); 
     ReactDOM.render(todoList, document.getElementById('react-app')); 
    </script> 
    </body> 
</html>

我相信上面的代碼侵犯了許多好的做法，但顯然很容易修改props。我知道這是因爲Object.freeze在props對象上被調用，而不是在它的屬性上調用，因此它不會凍結（或凍結）拼接（或更改道具對象的屬性值）。我的問題是：

上面的代碼應該如何寫出尊重ReactJS哲學？
如果不修改道具是ReactJS哲學的核心原則，爲什麼它沒有更嚴格地執行？

來源

2016-03-03 Marcus Junius Brutus

據react理念，建議您不要編輯的道具，因爲它不是如何react是設計（Thinking in React）。

你應該用你的看法這符合變化的state，你可能一些數據傳遞從state到props。

看到你的代碼的正確例子：

var TodoList = React.createClass({ 
    propTypes: { 
    todos: React.PropTypes.arrayOf(React.PropTypes.string).isRequired, 
    onSomeAction: React.PropTypes.func.isRequired 
    }, 


    render: function() { 
    var todos = this.props.todos; 
    var self = this; 
    return rce('div', {} 
       ,rce('ul', {} 
        , (function(){ 
        return todos.map(function(x, i) { 
         return rce('li', {key: i}, x); 
        });})()) 
     ,rce('button', {onClick: this.props.onSomeAction}); 
    } 
});

做什麼，以及如何，單擊該按鈕時，應在該視圖的所有者的地方，除非你管理你自己的狀態在邏輯目前來看。

此外，有限定虛設視圖和智能視圖的概念。簡而言之，虛擬視圖是這樣的：它們只能獲得屬性並在屏幕上顯示一些數據，但它們不與其他對象交互或不能更改視圖的state。但是，智能視圖是這樣的：它們與其他人交互，響應事件等，並且能夠改變其狀態並將任何其他數據傳遞給其子女。

希望你現在更清楚......

來源

2016-03-03 17:30:23

關於更新ReactJS中的道具

回答

相關問題