Question

此处的示例 - https://facebook.github.io/react/tips/initial-ajax.html - 在下面进行了修改。

this.state.username在加载时为“占位符”，并传递给<UserGist />

AJAX加载后this.state.username更改为“octocat”，但是......

为什么这不会传递给<UserGist />组件？

var UserGist = React.createClass({

    getInitialState: function() {
        return {
            username: this.props.username
        };
    },

    render: function() {
        return (
            <div>
                {this.state.username}
            </div>
        );
    }

});

var App = React.createClass({

    getInitialState: function() {
        return {
            username: 'placeholder'
        };
    },

    componentDidMount: function() {
        this.serverRequest = $.get(this.props.source, function (result) {
            var lastGist = result[0];
            this.setState({
                username: lastGist.owner.login
            });
        }.bind(this));
    },

    componentWillUnmount: function() {
        this.serverRequest.abort();
    },

    render: function() {
        return (
            <div>
                <UserGist username={this.state.username} />
            </div>
        );
    }

});

ReactDOM.render(
    <App source="https://api.github.com/users/octocat/gists" />,
    document.getElementById('main')
);

Answer 1

您正在将新用户名传递给您的子组件，但您没有更新您的子状态。

如果您想在组件收到新道具时更新您的子状态，您应该实现它。

UserGist组件。

componentWillReceiveProps: function(nextProps){
       this.setState({username: nextProps.username});
}

Answer 2

您应该通过UserGist组件中的道具访问该值，因为它会以prop传递：

var UserGist = React.createClass({
  render: function() {
    return (
      <div>
        {this.props.username}
      </div>
    );
  }
});

然后可以将其表示为无状态功能组件（如果您使用React＆gt; 0.14）：

function UserGist(props) {
  return <div>{props.username}</div>
}

除非你要在组件本身内对它进行某种变异，否则没有必要将其转换为状态。最好尽量尝试使用道具，尽量减少状态。

进一步阅读：

state vs props：What is the difference between state and props in React?
Stateless Functional Components

React - 如何在AJAX加载时更新子项

2 个答案: