react根据点击加载新内容

Question

我有三个独立的文件。

Nav.js

var NavItem = React.createClass({
  render: function() {
    return (
      <li><a href="#">{this.props.name}</a></li>
    );
  }
});
var NavList = React.createClass({
  render: function() {
    var navNodes = this.props.data.map(function(nav) {
      return (
        <NavItem name={nav.name} key={nav.id}></NavItem>
      );
    });
    return (
      <ul className="nav">
        <li className="current"><a href="#"><i className="glyphicon glyphicon-home"></i> Lists</a></li>
        {navNodes}
        <li><a href="#"><i className="glyphicon glyphicon-plus"></i> Add New Widget List</a></li>
      </ul>
    );
  }
});
var NavBox= React.createClass({
  loadNavsFromServer: function() {
    $.ajax({
      url: "http://server/api/widgetlists/?format=json",
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error("http://server/api/widgetlists/?format=json", status, err.toString());
      }.bind(this)
    });
  },
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    this.loadNavsFromServer();
  },
  render: function() {
    return (
      <div className="col-md-2">
        <div className="sidebar content-box" style={{display: "block"}}>
            <NavList data={this.state.data} />
        </div>
      </div>
    );
  }
});
module.exports = {
    NavBox: NavBox
}

Content.js

var Widgets = React.createClass({
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    $.ajax({
      url: 'http://server/api/widgets/?list="xxxx"&format=json',
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error('http://server/api/widgets/?list="xxxx"&format=json', status, err.toString());
      }.bind(this)
    });
  },
  render: function() {
    return (
      <div className="col-md-10">
    <div className="row">
      <div className="col-md-6">
        <div className="content-box-large">
          <div className="panel-body">
              <BootstrapTable data={this.state.data} striped={true}>
                <TableHeaderColumn isKey={true} hidden={true} dataField="id">Widget ID</TableHeaderColumn>
                <TableHeaderColumn dataField="title">Title</TableHeaderColumn>                
                <TableHeaderColumn dataField="username">Username</TableHeaderColumn>
                <TableHeaderColumn dataField="price">Price</TableHeaderColumn>
              </BootstrapTable>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
});
module.exports = {
    Widgets: Widgets
}

App.js

var Navigation = require("./components/Navigation/Navigation");
var Content = require("./components/Content/Content");
ReactDOM.render(
   <Navigation.NavBox/>,
    document.getElementById('navigation')
);
ReactDOM.render(
   <Content.Widgets/>,
    document.getElementById('content')
);

根据在Nav.js中单击的链接，我希望它更新Content.js中的数据。Nav.js的NavItem会将列表名称传递到Content.js（"xxxx"）中，以便表加载基于该项的特定数据。

Answer 1

@FakeRainBrigand在评论中提到，这是Flux等基于事件的模式的典型用例。

https://facebook.github.io/flux/docs/overview.html

基本上，您希望创建某种类型的单例数据存储来跟踪列表名称。将单击处理程序附加到NavItem组件，该组件会更改存储中的列表名称。存储应该发出一个更改事件来响应任何更改。Widgets组件应该监听存储上的更改，当Widgets组件听到存储上的一个更改时，它应该用新的列表项发出另一个AJAX请求。

如果您对实施有任何具体问题，请告诉我。