当来自外部的值发生变化时，如何使 React 组件重新渲染？答案

【问题标题】：How to make a React component re-render when a value from outside changes?当来自外部的值发生变化时，如何使 React 组件重新渲染？
【发布时间】：2017-10-18 15:53:46
【问题描述】：

我的项目使用 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 组件就会重新渲染。目前的方法行不通。我该如何解决？

【问题讨论】：

标签： javascript reactjs meteor

【解决方案1】：

它不会重新渲染，因为 createContainer 仅使用反应变量更新，例如订阅（或反应变量）。在您的情况下，容器没有任何实用程序，您可以在对话组件中移动该逻辑。这样做您可以将 webRc 变量分配给状态，因此组件会在每次更改时重新渲染。

【讨论】：

【解决方案2】：

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

像这样向您的 WebRTC 类添加一个方法...

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

并且大概在您的 WebRTC 课程中的某个地方，您可以了解呼叫状态的更改，这就是您将 true 或 false 分配给 .isCalling 成员的地方。无论这段代码在 WebRTC 的什么地方，添加如下一行：

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

基本上，上述更改为您的 WebRTC 类添加了一个通知接口。您还必须更改您的 Conversation 组件以绑定到此接口并使用它来更新 Conversation 组件的状态（触发渲染）。下面的代码展示了如何做到这一点：

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

【讨论】：