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请求。

如果您对实施有任何具体问题，请与我们联系。

根据点击反应加载新内容

1 个答案: