Reactjs 组件之间的通信

这是我的情况，我对反应/通量非常陌生，刚刚开始玩弄它。我的玩具项目是一个简单的图书馆应用程序。我目前的情况如下：

• 我有一个名为Login的组件。此组件仅负责存储当前“登录”的用户，以便能够处理库中的后期借用/归还按钮。因此，用户输入它的名称，该名称将在此时保存到会话存储中
• 我的另一个组件叫做Library，它保存着我的应用程序的主要逻辑

如果我更改了当前用户，我很难找到如何重新渲染我的库组件。因为这是我的第一个项目，我不想玩弄正确的身份验证，也不想创建路由器。因此，我只是制作了一个登录表单，每当用户输入他的名字并登录时，我就会将库应用程序呈现到DOM上

Login = React.createClass({

  _handleSubmit: function () {

    var inp = this.refs.login.getDOMNode();

    sessionStorage.setItem("username", inp.value);
    console.info('User Credentials saved to SessionStorage');
    inp.value = '';

    React.renderComponent(
      <Library />,
      document.querySelector('#content')
    );
  },

  render: function () {
    return (
      <div className="panel panel-default">
        blabla
                  <button className="btn btn-default" type="button" onClick={this._handleSubmit} >
                    Login
                  </button>
        blabla
      </div>
    );
  }
});

Login.jsx

/** @jsx React.DOM */
'use strict';
var React = require('react'),
    BookShelf = require('./BookShelf.jsx'),
    Store = require('../stores/Store'),
    Library;

/**
 * Gets state from Storage
 * @returns {{books: BookCollection, users: UserCollection, categories: CategoryCollection}}
 */
function getState() {
  var state = Store.getAll();
  return {
    books: state.books,
    users: state.users,
    categories: state.categories
  };
}

Library = React.createClass({
  getInitialState: function() {
    return getState();
  },
  componentDidMount: function() {
    Store.addChangeListener(this._onChange);
    Store.initialize();
  },
  componentWillUnmount: function() {
    Store.removeChangeListener(this._onChange);
  },
  _onChange: function() {
    this.setState(getState());
  },
  render: function() {
    return (
      <div>
        <BookShelf
          books={this.state.books}
          users={this.state.users}
          categories={this.state.categories}
        />
      </div>
    );
  }
});

module.exports = Library;

上面提到的

Library.jsx

/** @jsx React.DOM */
'use strict';
var React = require('react'),
    BookShelf = require('./BookShelf.jsx'),
    Store = require('../stores/Store'),
    Library;

/**
 * Gets state from Storage
 * @returns {{books: BookCollection, users: UserCollection, categories: CategoryCollection}}
 */
function getState() {
  var state = Store.getAll();
  return {
    books: state.books,
    users: state.users,
    categories: state.categories
  };
}

Library = React.createClass({
  getInitialState: function() {
    return getState();
  },
  componentDidMount: function() {
    Store.addChangeListener(this._onChange);
    Store.initialize();
  },
  componentWillUnmount: function() {
    Store.removeChangeListener(this._onChange);
  },
  _onChange: function() {
    this.setState(getState());
  },
  render: function() {
    return (
      <div>
        <BookShelf
          books={this.state.books}
          users={this.state.users}
          categories={this.state.categories}
        />
      </div>
    );
  }
});

module.exports = Library;

/**@jsx React.DOM*/
"严格使用",；
var React=require（'React'），
BookShelf=require（'./BookShelf.jsx'），
Store=require（'../stores/Store'），
图书馆；
/**
*从存储器获取状态
*@returns{{books:BookCollection，users:UserCollection，categories:CategoryCollection}
*/
函数getState（）{
var state=Store.getAll（）；
返回{
图书：国家图书，
用户：state.users，
类别：state.categories
};
}
Library=React.createClass({
getInitialState:函数（）{
返回getState（）；
},
componentDidMount:function（）{
Store.addChangeListener（this.\u onChange）；
Store.initialize（）；
},
componentWillUnmount:function（）{
Store.removeChangeListener（this.\u onChange）；
},
_onChange:function（）{
this.setState（getState（））；
},
render:function（）{
返回(
);
}
});
module.exports=库；

如果这是一个Flux应用程序，那么您需要获取所有应用程序逻辑和应用程序状态，并将其移动到一个商店（或多个商店）

现在，看起来你在做与图书馆相关的事情。我会把那个商店改名为LibraryStore。但您可能需要AppStore、UserStore、SessionStore或具有与登录状态、当前用户和身份验证令牌相关的逻辑和数据的东西

因此，一旦用户登录，您会希望创建一个操作（选项3），让应用程序中的所有不同商店都知道您的用户已登录，但主要是通知应用商店。然后，您的顶级控制器视图可以侦听AppStore并决定显示什么。如果您使用的是React的事件模型，则无需担心清理事件处理程序。通量控制器视图不使用React模型，因此我们必须在卸载时清理这些视图

---

部分困难可能来自模拟异步进程。例如，身份验证将需要一个服务器调用，您的新操作将在该调用的成功/错误回调中创建。要针对localStorage进行模拟，您可以对存储进行同步查询，然后调用两个不同操作中的一个以获得成功/失败。

如果这是一个Flux应用程序，那么您需要获取所有应用程序逻辑和应用程序状态，并将其移动到一个存储（或多个存储）中

现在，看起来你在做与图书馆相关的事情。我会把那个商店改名为LibraryStore。但您可能需要AppStore、UserStore、SessionStore或具有与登录状态、当前用户和身份验证令牌相关的逻辑和数据的东西

因此，一旦用户登录，您会希望创建一个操作（选项3），让应用程序中的所有不同商店都知道您的用户已登录，但主要是通知应用商店。然后，您的顶级控制器视图可以侦听AppStore并决定显示什么。如果您使用的是React的事件模型，则无需担心清理事件处理程序。通量控制器视图不使用React模型，因此我们必须在卸载时清理这些视图

---

部分困难可能来自模拟异步进程。例如，身份验证将需要一个服务器调用，您的新操作将在该调用的成功/错误回调中创建。要针对本地存储模拟此操作，您可以对存储进行同步查询，然后调用两个不同操作中的一个以获得成功/失败。

谢谢，正在应用更改。；）现在我按照你的建议重写了我的应用程序。我终于可以让它工作了，谢谢。结果（高度简化）登录->操作#更新基础->会话存储->操作#初始化->库存储->初始化感谢，应用更改正在进行中现在我按照你的建议重写了我的应用程序。我终于可以让它工作了，谢谢。结果（高度简化）登录->操作#更新基础->会话存储->操作#初始化->库存储->初始化