Javascript 基于单击加载新内容

我有三个单独的文件

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
}

var NavItem=React.createClass({
render:function（）{
返回(

);
}
});
var NavList=React.createClass({
render:function（）{
var navNodes=this.props.data.map（函数（nav）{
返回(
);
});
返回(


{navNodes}


);
}
});
var NavBox=React.createClass({
loadNavsFromServer:函数（）{
$.ajax({
url:“http://server/api/widgetlists/?format=json",
数据类型：“json”，
cache:false，
成功：功能（数据）{
this.setState（{data:data}）；
}.绑定（此），
错误：函数（xhr、状态、错误）{
控制台错误（“http://server/api/widgetlists/?format=json，状态，err.toString（））；
}.绑定（此）
});
},
getInitialState:函数（）{
返回{data:[]}；
},
componentDidMount:function（）{
this.loadNavsFromServer（）；
},
render:function（）{
返回(
);
}
});
module.exports={
导航盒：导航盒
}

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
}

var Widgets=React.createClass({
getInitialState:函数（）{
返回{data:[]}；
},
componentDidMount:function（）{
$.ajax({
网址：'http://server/api/widgets/?list=“xxxx”&格式=json'，
数据类型：“json”，
cache:false，
成功：功能（数据）{
this.setState（{data:data}）；
}.绑定（此），
错误：函数（xhr、状态、错误）{
控制台。错误（'http://server/api/widgets/?list=“xxxx”&format=json'，状态为err.toString（））；
}.绑定（此）
});
},
render:function（）{
返回(
小部件ID
标题
用户名
价格
);
}
});
module.exports={
小部件：小部件
}

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')
);

var-Navigation=require（“./components/Navigation/Navigation”）；
var内容=要求（“/组件/内容/内容”）；
ReactDOM.render(
,
document.getElementById（'navigation'）
);
ReactDOM.render(
,
document.getElementById（'content'）
);

---

根据Nav.js中单击的链接，我希望它更新Content.js中的数据。Nav.js中的NavItem会将列表名传递到Content.js（即“xxxx”）中，这样表就会加载基于该项的特定数据。

正如@FakeRainBrigand在他的评论中提到的，对于某些类型的基于事件的模式（如Flux），这是一个非常典型的用例

基本上，您希望创建某种类型的单例数据存储来跟踪列表名称。将一个单击处理程序附加到导致更改存储中列表名称的

NavItem

组件。存储应发出更改事件以响应任何更改。

小部件

组件应侦听当

Widgets

组件听到存储上的更改时，它应该使用新的列表项发出另一个AJAX请求

---

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

您可以使用事件发射器在没有公共父级的组件之间进行通信。