当外部值发生变化时，如何使React组件重新呈现？
当外部值发生变化时，如何使React组件重新呈现？
提问于 2017-05-19 01:32:41
我的项目使用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组件就会重新呈现。目前的方法不起作用。我怎么才能修复它？
回答 2
Stack Overflow用户
发布于 2017-05-19 04:30:49
您需要在WebRTC中获取isCalling的状态更改，才能在组件中触发状态更改。状态更改将导致调用render()。
向您的WebRTC类添加一个方法，如下所示...
function setOnCallStatusChange(onCallStatusChange) {
this.onCallStatusChange = onCallStatusChange;
}大概在您的WebRTC类中的某个地方，您可以了解呼叫状态的更改，在这里您可以将true或false赋值给.isCalling成员。无论此代码在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>)
}
}Stack Overflow用户
发布于 2017-05-19 03:14:26
它不会重新呈现，因为createContainer仅使用反应变量进行更新，例如订阅(或反应变量)。在您的示例中，容器没有任何实用程序，您可以在对话组件中移动该逻辑。这样，您可以将webRc变量赋给状态，这样组件在每次更改时都会重新呈现。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44054435
复制相关文章
相似问题
腾讯云开发者
