Question

我正在开发单页面应用程序，并希望将用户身份验证数据传递给子组件。如何在子组件reactjs中传递和访问它。我在app容器中调用身份验证方法，需要将其传递给它的一些子组件。

@asyncConnect([{
promise: ({ store: { dispatch, getState } }) => {
    const promises = [];
    if (!isLoaded(getState())) {
        promises.push(dispatch(loadmyauth()));
    }
    return Promise.all(promises);
}
}])
@connect(
state => ({
    user: state.auth.user
}))
export default class App extends Component {
static propTypes = {
    children: PropTypes.object.isRequired,
    user: PropTypes.object
};
static contextTypes = {
    store: PropTypes.object.isRequired
};
constructor(props) {
    super(props);
    var user = {
        auth :'false',
        account_type : 'N',
        profile_pic : null,
        useremail : null,
        userid : null,
        username : null,
        FNAME : null,
        LNAME : null,
    }

    this.state = {
        user: props.user,
        authloaded: false,
    }
}
render() {
    const { children } = this.props;
    return (
        <div>
            <Helmet {...config.app.head}/>
            <Header user={this.state.user} />
            <div className="mainapp-content">{this.props.children}</div>
        </div>
    );
}
}

Answer 1

如果您使用的是redux而不是我认为您在app组件中设置了状态。相反，state是redux存储中的句柄，并作为props传递给你的app组件。但我可能是错的，我不是redux专家。

如果你想在你的应用程序组件处理状态并通过上下文传递它，这应该让你开始。

import React from 'react';
import _ from 'underscore';

var AppHeader = React.createClass({

  contextTypes: {
    appManager: React.PropTypes.object
  },
  render() {

    return <div>
              <b>First Name:</b><span>{this.context.appManager.User.FirstName}</span><br/>
              <b>Last Name:</b><span>{this.context.appManager.User.LastName}</span><br/>
           </div>
  }

});

var App = React.createClass({

  getInitialState() {
    return {
      User: {
         FirstName: '',
         LastName: ''
      }
    }
  },
  childContextTypes: {
        appManager: React.PropTypes.object
  },
  getChildContext() {
        return {
            appManager: {
                User: _.extend({}, this.state.User)
            }
        }
  },
  setUserInfo() {

    if (this.state.User.FirstName == 'Homer') {
      this.setState({
        User: { FirstName: 'Peter', LastName: 'Griffin' }
      });  

    } else {
      this.setState({
        User: { FirstName: 'Homer', LastName: 'Simpson' }
      });
    }
  },
  render() {
    return <div>
      <h1>My App!</h1>
      <input type="button" value="Update User Stat!" onClick={this.setUserInfo} />
      <h3>Header Info</h3>
      <AppHeader/>
      <h3>The Content</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus turpis, bibendum sit amet finibus nec, imperdiet ut nisi. Maecenas et orci vitae ante convallis iaculis at sit amet augue. Fusce est libero, interdum vitae interdum id, auctor eu ex. Donec pretium quis nibh et ornare. Donec sodales elit at vehicula rhoncus. In facilisis facilisis sem a tristique. Sed non nulla nec velit maximus aliquet sit amet vitae eros. In finibus tortor ut ipsum porttitor, et ullamcorper lorem facilisis. Sed porttitor turpis ac vulputate porta. Fusce gravida tellus elit, sed feugiat sapien tincidunt ut. Maecenas augue purus, dictum id eros a, tincidunt fringilla nisi. In eros neque, pulvinar ac velit vel, fermentum facilisis justo. Phasellus laoreet egestas tortor, id tincidunt eros tempus et. Morbi et diam ut ante sodales eleifend et eu lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec sodales eget ex sit amet interdum.
      </p>
      </div>
  }
})

export default App;

要使用上下文，您需要在两个组件中进行设置。一个人需要成为提供者，其他人需要成为接收者。在您的情况下，App组件需要通过使用childContextTypes属性和getChildContext方法定义上下文来为其子级提供上下文。

childContextTypes: {
        appManager: React.PropTypes.object
  },
  getChildContext() {
        return {
            appManager: {
                User: _.extend({}, this.state.User)
            }
        }
  },

然后在您的子组件中使用contextTypes属性将它们标记为接收器，如下所示：

contextTypes: {
    appManager: React.PropTypes.object
  },

通过这样做，您可以链接这两个组件，而无需直接传递道具。子组件将能够使用this.context。[无论您在父级中提供什么，在这种情况下都是＆＃39; appManager＆＃39;]。[在appManager＆＃39;中定义的任何方法或属性，这个案例＆＃39;用户＆＃39;]

用户属性将是App组件中用户状态的副本。

User: _.extend({}, this.state.User)

在此示例中，如果单击该按钮，它将更改App组件中的状态，该组件将通过上下文更新所有子组件。为了看到这一点，我制作了webpackbin you to play with。

当然，只有当您不知道您的孩子会是什么但仍需要提供他们的数据时，这才有用。一个更简单的解决方案是直接将用户作为道具传递给孩子。

Answer 2

我通过使用redux管理应用程序状态来解决这个问题。我使用react和redux对每个组件进行本地状态以保存数据。当我想要更改数据时，我会在本地使用react状态和还原数据进行更改，这样就可以使数据保持同步。

Answer 3

我发现MobX是一位优秀的州经理，与React的效果非常好。您可以通过context组件使用React的<Provider>。

let store = observable({
  userInfo: myUserInfo
});

然后将您的应用程序包装在节点中：

<Provider store={store}>
<MainAppNode>
</Provider>

在您的组件中，通过装饰您的组件来访问商店：

import { observer, inject } from 'mobx-react'
@inject("store") @observer class AddBar extends React.Component {
    //access your store with this.props.store
}

如何在React

3 个答案: