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类中添加一个方法......

find -print0 | while IFS= read -r -d '' filename

并且可能在您的WebRTC课程中有一些地方您可以了解呼叫状态的更改，这是您为.isCalling成员分配true或false的地方。无论此代码在WebRTC中的哪个位置，都要添加如下所示的行：

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

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

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

Answer 2

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

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

2 个答案: