Question

在我的React应用中，当用户登录时，其用户数据将设置为UserStore.currentUser。组件应如何访问UserStore.currentUser？

组件似乎有4个选项来访问此数据。哪个（如果有的话）是正确的？

选项1：将其设置为某个组件＆＃34;州＆＃34;

  var ProfilePicture = React.createClass({
    getInitialState: function(){
      return {
        currentUser: UserStore.currentUser
      }
    },
    render: function(){
      return <h1>Hi my name is {this.currentUser.name}</h1>;
    }
  });

选项2：直接访问商店的媒体资源

var ProfilePicture = React.createClass({
  render: function(){
    return <h1>Hi my name is {UserStore.currentUser.name}</h1>;
  }
});

选项3：通过getter方法访问商店的属性

var ProfilePicture = React.createClass({
  render: function(){
    return <h1>Hi my name is {UserStore.getCurrentUser().name}</h1>;
  }
});

选项4：在根组件的状态中设置currentUser。作为道具传递给所有其他人

var App = React.createClass({
  getInitialState: function(){
    return { currentUser: UserStore.currentUser };
  },
  render: function(){
    return <div>
      <ThingA />
      <ThingB />
      <ProfilePicture userName={this.state.currentUser.name} />
    </div>;
  }
});

var ProfilePicture = React.createClass({
  render: function(){
    return <h1>Hi my name is {this.props.userName}</h1>;
  }
});

Answer 1

在这种情况下，我认为这不是一个特别好的主意。如果name发生变化怎么办？最好将connect商店添加到视图（组件容器）并通过prop传递name到ProfilePicture。这可以使您的组件分离。这也使测试更容易。

就React 0.14而言，我会写这样的东西：

export default ({name}) => <h1>{`Hi my name is ${name}`}</h1>

基于功能的组件定义仅适用于简单情况。

Answer 2

您的商店包含的方法可以为您提供数据，如

getUserinfo:function()
{
  return currentUser;
}

现在您可以访问您只需要调用商店的任何组件

var UserStore=require('./UserStore);

var currentuser=UserStore.getUserinfo();

Answer 3

mixins: [
    Reflux.listenTo(UserStore,'onSessionChange'),
    ],
getInitialState() {
    return {
        name: '',
        other: ''
    };
},
componentDidMount() {
    UserActions.getUserInfo();
},
onSessionChange(userInfo) {
    this.setState({
        name: userInfo.name,
        other: userInfo.other
    })
},

当您使用回流时，我认为听听组件中的数据更改会更好。

组件应如何从商店访问数据？

3 个答案: