2017-06-23 24 views
0

に変異している状態を言う:が反応:私はこのクラスを持つクラスのインスタンスは、

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

答えて

0

これについて移動する2つの方法があります。まず、簡単な方法です: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}); 
    } 
}); 

これにより、コンポーネントが変更され、コンポーネントが再描画されます。

関連する問題