Question

我正在使用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。

我该怎么做？谢谢你提前！

Answer 1

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

这就是答案：

<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);
},

希望有人帮助这个答案！

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

1 个答案: