如何从全局上下文调用React组件的函数(一致性UI)
如何从全局上下文调用React组件的函数(一致性UI)
提问于 2016-04-13 18:20:03
我的反应非常新，我正在尝试开发一个UI，以便使用连贯的UI在游戏引擎中使用。我的UI是由React构建的，我正在尝试将来自连贯UI的消息输入我的React应用程序中。
连贯的UI提供了向浏览器发送原始javascript脚本命令以执行或注册事件的能力，但这两个命令对我都不起作用。
我希望有条理的UI发送一个简单的javascript命令toggleLoadingAnimation();，但是我不知道如何在React中创建这个javascript函数，它实际上将调用组件的函数或更改其状态。
下面是有关发送Javascript命令的连贯UI信息：cxx.html
如何格式化命令或正确注册要以这种方式调用的组件的回调函数？
有没有办法让组件调用其成员函数之一？
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-04-18 20:22:32
最后，我使用Redux解决了这个问题，并在窗口级别公开了Store。
组件订阅存储(通常使用Redux的connect()自动订阅)，然后可以发送分派消息，并由订阅的组件接收。
const store = createStore(Reducer, { variants, selectedVarient: 0, loadingVisible: false });
window.store = store;
...
<Provider store={ store }>
<App />
</Provider>这允许我从控制台发出命令(类似地，连贯的UI可以发送命令)，如下所示：
store.dispatch({ type: 'SET_LOADING_VISIBLE', loadingVisible: true });
Stack Overflow用户
发布于 2016-04-13 20:19:47
这听起来像是一种反作用反模式，但是您可以考虑在componentDidMount中定义一个函数：
componentDidMount() {
var that = this;
window.toggleLoadingAnimation = function () {
that.whateverComponentMethodYouWant();
}
}
componentWillUnmount() {
window.toggleLoadingAnimation = undefined;
}Stack Overflow用户
发布于 2016-04-13 18:51:26
您可以更改道具，然后再次执行ReactDOM.render，react组件将保持状态。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36606467
复制相关文章
相似问题
腾讯云开发者
