Question

在我的应用程序中，我有一个依赖于状态的组件，它将在组件内未处理的异步事件之后更新。

var Status = React.createClass({
    getInitialState: function () {
        return {
            state: 'loading'
        };
    },
    render: function () {
        return React.createElement('span', null, this.state.state);
    }
});

var status = React.createElement(Status);
React.render(status, mountNode);

我希望能够做到这样的事情：

doAsyncThing(function callback() {
    status.setState({ state: 'done' });
});

我了解异步逻辑可以移动到componentDidMount，如here所示，但可以将其移到组件外部吗？或者只是将React zen放在组件中？

Answer 1

Pubsub模式可能是您的解决方案（在这种情况下使用Backbone）：

var ps=_.extend({},Backbone.Events);
var Status = React.createClass({
    getInitialState: function () {
        return {
            state: 'loading'
        };
    },
    componentDidMount: function(){
       ps.on('done',function(){
            status.setState({ state: 'done' });
       });//your callback function
    },
    render: function () {
        return React.createElement('span', null, this.state.state);
    }
});

var status = React.createElement(Status);
React.render(status, mountNode);

然后触发done回调中的doAsyncThing事件：

doAsyncThing(function callback() {
    ps.trigger('done');
});

Answer 2

我确实会将它放在componentDidMount中，但您可以选择将您的电话放在室外，并在成功时将视图传递给道具。

此外，这被认为是反模式，除非这只是初始加载。

请参阅：https://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html

修改：这是一个更清晰的解释，同样的问题bind(this) not working on ajax success function

最简单的方法是使用componentDidMoun：https://facebook.github.io/react/tips/initial-ajax.html

Pub / sub会起作用，但我认为这可能不是最好的解决方案。让我知道你的想法。

React：在异步事件未连接到组件后更新组件

2 个答案: