外部からの値が変更されたときにReactコンポーネントを再レンダリングする方法は？

Question

私のプロジェクトはMeteorとReactを使用しています。
IがのWebRTC関連ロジックを管理するため、このクラスWebRTCを有する：

class WebRTC { 
    this.isCalling = false;  
    ... 
} 

また、上記WebRTCクラスのインスタンスであるwebRTCという名前のプロパティを持つこのクラス（成分を反応させる）Conversation：

class Conversation extends React.Component { 
    render() { 
    const { webRTC } = this.props; 
    if (webRTC.isCalling) return (<p>In call</p>); 
    return (<p>Available</p>) 
    } 
} 

export default createContainer(() => { 
    const user = Meteor.user(); 
    const webRTC = new WebRTC(); 
    return { 
    user, 
    webRTC, 
    } 
}, Conversation); 

webRTCインスタンスのisCallingの値が変更されると、Conversationコンポーネントが再レンダリングされるたびに実行します。現在の方法は機能しません。どうすれば修正できますか？

Answer 1

createContainerはサブスクリプション（またはリアクティブ変数）などのリアクティブ変数のみで更新されるため、再描画されません。あなたのケースでは、コンテナにはユーティリティがなく、会話コンポーネント内でそのロジックを移動できます。これを行うと、webRc変数を状態に割り当てることができるため、コンポーネントはすべての変更に再レンダリングします。

Answer 2

WebRTCでisCallingの状態変更を取得して、コンポーネントの状態変更をトリガする必要があります。状態を変更すると、render（）が呼び出されます。

...このようなあなたのWebRTCのクラスにメソッドを追加

function setOnCallStatusChange(onCallStatusChange) { 
    this.onCallStatusChange = onCallStatusChange; 
    } 

そしておそらくあなたは通話状態への変化について学び、あなたが本当の割り当てされている場合、これはあなたのWebRTCのクラスのいくつかの場所があります.isCallingメンバにfalseを返します。このコードはのWebRTCの内側にある場合はいつでも、次のような行を追加します。

if (this.onCallStatusChange) {onCallStatusChange(this.isCalling);} 

は、基本的には、上記の変更は、あなたのWebRTCクラスに通知インターフェイスを追加します。また、このインターフェイスにバインドして会話コンポーネントを変更して、会話コンポーネントの状態（レンダリングのトリガー）を更新する必要があります。次のコードは、これを行う方法を示しています。

class Conversation extends React.Component { 
    constructor() { 
    super(); 
    this.state = { isCalling: false; } 
    this.handleCallStatusChange.bind(this); 
    } 

    handleCallStatusChange(isCalling) { 
    this.setState({isCalling}); 
    } 

    componentWillMount() { 
    this.props.webrtc.setOnCallStatusChange(this.handleCallStatusChange); 
    } 

    render() { 
    if (this.state.isCalling) return (<p>In call</p>); 
    return (<p>Available</p>) 
    } 
}