React.js onShow事件处理程序

Question

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

componentDidMount在一开始就启动，所以它不是一个选项。如果有一个类似于onClick的HTML事件onShow，那就太好了，但似乎不存在这样的事件。

有什么建议吗？

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

现在你的主页应该看起来像

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