Question

我的页面上有一个标签式菜单，基本上是一堆显示/隐藏的div，具体取决于单击的标签。我希望能够在其中一个div中的React Component中重新获取数据。

componentDidMount一开始就会发生火灾，所以它不是一个选择。如果有一个类似于onShow的HTML事件onClick会很好，但似乎并不存在这样的事件。

有什么建议吗？

谢谢！

Answer 1

我有一个Tabs组件但在我的情况下，所有选项卡内容都已挂载但未显示。当我点击标签时，我只是用css

更改可见性

但要重新获取数据，您应该为容器中的一个组件创建一个组件，以便在componentDidMount中获取数据，因此，如果您切换哪一个呈现，则在顶层，componentDidMount将触发。 / p>

如果您需要一些案例帮助

，请输入一些代码

Answer 2

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

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

Answer 3

嘿你必须将标签分离为组件并根据标签更改渲染这些组件，让我举一个例子。

假设我在该页面中有一个名为MainPage的页面，我有Tab控件，其中包含三个选项卡First，Second和Third。

首先你必须创建一个像

这样的三个组件

 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>

        )
        }
})

现在您的MainPage应该看起来像

{{1}}

React.js onShow事件处理程序

3 个答案: