javascript - 当外部值发生变化时，如何使 React 组件重新渲染？

Question

我的项目使用 Meteor 和 React。
我有这个类 WebRTC 用于管理 WebRTC 相关逻辑:

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

还有这个类(React 组件)Conversation，它有一个名为 webRTC 的属性，它是上面 WebRTC 类的实例:

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

您需要获取 WebRTC 中 isCalling 的状态更改以触发组件中的状态更改。状态改变将导致 render() 被调用。

向您的 WebRTC 类添加一个方法，如下所示...

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

大概在您的 WebRTC 类中的某个位置您可以了解调用状态的更改，并且您可以在此处为 .isCalling 成员分配 true 或 false。无论此代码位于 WebRTC 内部的何处，都添加如下行:

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

基本上，上述更改向您的 WebRTC 类添加了一个通知接口(interface)。您还必须更改您的对话组件以绑定(bind)到此接口(interface)并使用它来更新对话组件的状态(触发渲染)。下面的代码展示了如何执行此操作:

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