Question

我有一种情况，我确信很常见，我还没有学会完成它的反应方式。假设我有这个：

var appView = new React.createClass({
    render: function() {
        return (
            <div>
                <SomeSubview/>
            </div>
        )
    }
});

React.render(
    React.createElement(appView),
    $('#app').get(0)
);

我的问题是我应该如何创建SomeSubView react组件，以便它可以在没有任何数据的情况下正确呈现，然后在数据可用时呈现显示一些数据。我有pub / sub系统设置，所以我希望能够订阅一个事件并以这种方式将数据提供给SomeSubView。 SomeSubView可能看起来像这样：

SomeSubView = new React.createClass({
    componentDidMount: function() {
        pubsub.subscribe({
            callback: function() {
                // something the sets the state or a prop of this component
            }
        });
    },
    render: function() {
        // something that renders properly when 
        // there is no data and renders the data when there is data
        return (
            <div></div>
        )
    }
});

我不知道这是反应组件的状态还是道具的情况？我不知道将条件放入渲染函数是否是最佳做法？

Answer 1

在SomeSubView中，只需检查渲染功能中是否有数据，但在返回标记之前。

像这样：

SomeSubView = new React.createClass({
    componentDidMount: function() {
        pubsub.subscribe({
            callback: function() {
                // something the sets the state or a prop of this component
            }
        });
    },
    render: function() {
        // something that renders properly when 
        if( this.state.data.length > 0 ){
            var data = <li>{this.state.data}</li>;
        }

        return (
            <div>{data}</div>
        )
    }
});

如果未设置变量数据，React将简单地将其作为不存在传递。

当然，您也可以在状态数据上使用.map（）来循环标记，就像在大多数渲染示例中一样。

Answer 2

你必须使用像user3728205这样的状态，especifically setState（）。

setState(function|object nextState[, function callback])

将nextState与当前状态合并。这是主要方法   您用于从事件处理程序和服务器请求触发UI更新   回调。

第一个参数可以是一个对象（包含零个或多个键）   更新）或返回对象的函数（状态和道具）   包含要更新的密钥。

这是简单的对象用法......

setState({mykey: 'my new value'});

这说的是＆＃34;每当＆＃34;你通过setState更新状态，React会再次为你执行渲染方法。所以，你应该根据状态放置显示逻辑，当它改变时，显示的视图也会改变。

我说＆＃34;每当＆＃34;因为React没有动态重新渲染，但会创建一个待定的状态转换。

不要直接改变this.state，因为之后调用setState（）可能   替换你所做的突变。把它当作状态对待   不可变的。

setState（）不会立即改变this.state但会创建一个   待定状态转换。调用后访问this.state   方法可以返回现有值。

无法保证对setState的调用同步操作   并且可以批量调用以获得性能提升。

除非有条件，否则setState（）将始终触发重新渲染   渲染逻辑在shouldComponentUpdate（）中实现。如果可变的话   正在使用对象，逻辑无法实现   shouldComponentUpdate（），仅在新状态时调用setState（）   与以前的状态不同，将避免不必要的重新渲染。

有关React魔力的更多信息，请阅读this。 https://facebook.github.io/react/docs/reconciliation.html

可能有帮助的simple example。我建议阅读易于理解和实现的磁通体系结构（关于利用单向数据流），并且有类似Fluxxor的实现，可以方便使用磁通。这是你的pubsub部分。

如何制作一个可以在没有数据的情况下渲染并随后使用数据渲染的反应组件？

2 个答案: