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

Question

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

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

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

我的问题是我应该如何创建 SomeSubView 反应组件，以便它可以在没有任何数据的情况下正确渲染，然后在数据可用时渲染显示一些数据。我已经设置了 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])

Merges nextState with the current state. This is the primary method you use to trigger UI updates from event handlers and server request callbacks.

The first argument can be an object (containing zero or more keys to update) or a function (of state and props) that returns an object containing keys to update.

Here is the simple object usage...

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

这里说的是"whenever"你通过setState更新状态，React会为你再次执行render方法。所以，你应该根据状态放置你的显示逻辑，当它改变时显示的视图也会改变。

我说 "whenever" 因为 React 不会立即触发重新渲染，而是创建一个挂起的状态转换。

NEVER mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.

There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

setState() will always trigger a re-render unless conditional rendering logic is implemented in shouldComponentUpdate(). If mutable objects are being used and the logic cannot be implemented in shouldComponentUpdate(), calling setState() only when the new state differs from the previous state will avoid unnecessary re-renders.

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

一个 simple example 也许可以提供帮助。我建议阅读非常容易理解和实现的 flux 架构（关于利用单向数据流），并且你有像 Fluxxor 这样的实现可以促进 flux 的使用。这是您的发布订阅部分。

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

How to make a react component that can be rendered with no data and later rendered with data?

javascript

dom-events

reactjs