React.js onShow 事件处理程序

Question

我的页面上有一个选项卡式菜单，基本上是一堆 div，根据单击的选项卡显示\/隐藏。一旦出现，我希望能够在其中一个 div 中重新获取 React 组件中的数据。

componentDidMount<\/code>在一开始就触发，所以它不是一个选项。最好有一个类似于onClick<\/code>的 HTML 事件onShow<\/code> ，但似乎不存在这样的事件。

有什么建议？

"

Answer 1

我有一个选项卡组件，但在我的情况下，所有选项卡内容都已安装但未显示。 当我单击一个选项卡时，我只是用 css 更改可见性

但是，重新获取数据，你应该为他取数据的容器组件componentDidMount如果切换哪一个渲染所以，在顶级水平， componentDidMount将触发。

如果您需要有关案例的帮助，请输入一些代码

Answer 2

根据文档， componentDidUpdate可能是您正在寻找的。 在props和/或state发生变化并且组件重新渲染（初始渲染时不调用）之后调用它。

也就是说，仅在onClick处理程序本身中处理数据获取可能更简单，或者更好的是，在父组件中获取数据一次并将相关的数据片段传递给选项卡，然后根据需要显示/隐藏。

Answer 3

嘿，您必须将选项卡作为组件分离出来，并根据选项卡更改来渲染这些组件，让我在这里举一个例子。

假设我在该页面中有一个名为 MainPage 的页面，我有选项卡控件，其中包含三个选项卡第一、第二和第三。

首先，您必须创建一个三个组件，例如

var First=React.createClass({ // First Tab Content goes here });
var Second=React.createClass({// Second Tab Content goes here});
var Second=React.createClass({// Third Tab Content goes here});