阵营：告诉状态类的实例已经变异

Question

我有这个类：

class MyClass { 
    constructor() { 
    this.value = 'foo'; 
    } 

    mutate() { 
    this.value = 'bar'; 
    } 
} 

而这在其状态实例的组件：

let Component = React.createClass({ 
    getInitialState: function() { 
    return { 
     element: new Myclass() 
    }; 
    }, 
    mutateElement: function() { 
    this.state.element.mutate(); 
    } 
}); 

我怎样才能让<Component />知道this.state.element有变异，需要重新渲染？

使用React immutability Helpers不会为以下语法工作是无效的：

mutate() { 
    this = update(this, {value: {$set: 'bar'}); 
} 

Answer 1

有两种方式来进行此事。首先是简单的方法：this.forceUpdate() 但具体反应tells以尽可能避免它。但我觉得你有一个有效的用例。

let Component = React.createClass({ 
    getInitialState: function() { 
     return { element: new Myclass() }; 
    }, 
    mutateElement: function(){ 
     this.state.element.mutate(); 
     this.forceUpdate(); 
    } 
}); 

但是，如果你想坚持不使用this.forceUpdate()你可以在状态另一个变量和设置。

let Component = React.createClass({ 
    getInitialState: function() { 
     return { element: new Myclass(), 
     hasChanged: false }; 
    }, 
    mutateElement: function(){ 
     this.state.element.mutate(); 
     this.setState({hasChanged: true}); 
    } 
}); 

这会改变它并重新渲染你的组件。