我的页面上有一个选项卡式菜单，基本上是一堆 div，根据单击的选项卡显示/隐藏。我希望能够在其中一个 div 出现后重新获取 React 组件中的数据。
componentDidMount 一开始就会触发，所以这不是一个选项。最好有一个类似于onClick 的 HTML 事件 onShow，但似乎不存在这样的事件。
有什么建议吗？
谢谢！
【问题讨论】：
标签： javascript javascript-events reactjs event-handling
我有一个选项卡组件，但在我的情况下，所有选项卡内容都已安装但未显示。当我点击一个标签时，我只是用 css 改变可见性
但是要重新获取数据，您应该为在他的componentDidMount 中获取数据的容器创建一个组件，因此，在顶层，如果您切换哪个渲染，componentDidMount 将触发。
如果您需要有关案例的帮助，请输入一些代码
【讨论】：
嘿，您必须将选项卡分离为组件并根据选项卡更改来呈现这些组件，让我在这里举一个例子。
假设我在该页面中有一个名为 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});
现在你的 MainPage 应该是这样的
var MainPage=React.createClass({
onClick:function(e)
{
if($(e.target).attr('id')=="1")
{
React.render(<First />,document.getElementById('tab-content'));
}
else if($(e.target).attr('id')=="2")
{
React.render(<Second />,document.getElementById('tab-content'));
}
if($(e.target).attr('id')=="3")
{
React.render(<Third />,document.getElementById('tab-content'));
}
},
render:function()
{
return(
<div>
<div>
//Three Tabl goes here
<div id="1" onClick={this.HandleTab}>Tab 1</div>
<div id="2" onClick={this.HandleTab}> Tab 2</div>
<div id="3" onClick={this.HandleTab}>Tab 3</div>
</div>
//your Container Div
<div id="tab-content">
</div>
</div>
)
}
})
【讨论】：
根据docs，componentDidUpdate 可能是您正在寻找的。在 props 和/或 state 发生更改并且组件已重新渲染（初始渲染未调用）之后调用它。
也就是说，在onClick 处理程序本身中处理数据获取可能更简单，或者更好的是，在父组件中获取数据一次并将相关的数据片段传递给选项卡，然后显示/隐藏视情况而定。
【讨论】：