React.js onShow 事件处理程序

Question

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

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

有什么建议？

"

Answer 1

I have a Tabs component but in my case, all tabs content are mounted but not displayed. When I click on a tab, I just change the visibility with css

But to refetch data, you should make a component for the containers that fetch the data in his componentDidMount so, in the top level if you switch which one renders, the componentDidMount will trigger.

Put some code if you want some help with your case

Answer 2

Per the docs , componentDidUpdate is probably what you're looking for. It's called after props and/or state has changed and the component has re-rendered (not called for the initial render).

That said, it's probably simpler to just handle the data fetching in the onClick handler itself or better yet, fetch the data once in the parent component and pass down the relevant slice of data to the tabs and then show / hide as appropriate.

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