从另一个组件获取参数[React JS]

时间:2015-10-12 08:41:05

标签: javascript reactjs

我正在使用React创建一个网络应用。我的导航栏和主要内容存在问题。让我们看看问题:

AppWrapper 中,我有:

var contents = [
   <Offers />,
   <Create />,
   <List />
];

每个项目都将显示内容。

在getInitialState中我初始化它:

getInitialState: function() {
  return {
    currentTab: 0
  };
},

稍后,在渲染功能中我有这个:

return (
  <div>
    <Navbar />
    <div className='mainPanel'>
      {contents[this.state.currentTab]}
    </div>
  </div>
);

看到我在内容之前调用导航栏组件。

Navbar 组件中,我有一个菜单,从那里,我想要更改 AppWrapper 的currentTab。

我该怎么做?谢谢你提前!

1 个答案:

答案 0 :(得分:0)

在尝试处理之后,我发现了如何做到这一点。

这就是答案:

<Navbar selectTab={this.selectTab} />

selectTab: function(tab) {
    this.setState({ currentTab: tab });
}

我向 Navbar 组件传递了“父级的selectTab”( AppWrapper )。

然后在Navbar组件中:

<li>
    <a onClick={this.selectTab.bind(this, 0)}><i className="fa fa-dashboard fa-fw" /> Dashboard</a>
</li>
<li>
   <a onClick={this.selectTab.bind(this, 1)}><i className="fa fa-edit fa-fw" /> Create</a>
</li>

然后在 Navbar 的selectTab中,我将道具更改为当前标签。

selectTab: function(tab) {
    this.props.selectTab(tab);
},

希望有人帮助这个答案!