如何在语义ui中将状态传递给Tab渲染方法?

时间:2019-03-29 15:10:12

标签: javascript reactjs semantic-ui

我正在使用SUIR中的Tab 我正在尝试将一些状态数据传递到“窗格”之一中,并使用<Dropdown>模块来呈现该状态数据。我需要通过道具或其他东西传下来吗?

我想呈现一个特定于Tab 2的下拉列表。我真的只是想知道如何将状态数据传递给窗格的render方法。我在想也许将render方法从panes = [{},{},{}]中移出,然后将其放在render()的{​​{1}}中。我不确定这里最好的方法。

Codesandbox的以下代码。

App

1 个答案:

答案 0 :(得分:1)

例如,我可以想到以下解决方案:

  1. 查看您的布局,我认为不需要将状态传递给窗格的渲染方法,因为您没有Dropdown组件。因此,您只需根据Dropdown的值定义activeIndex的选项即可。
  2. 如果您想在标签内容中移动Dropdown组件(嗯,这很有意义),那么您可以

    • 为每个标签内容创建单独的组件(TabContent1TabContent2等-可以找出更合适的名称),然后在{{1 }},如您建议的那样:

      panes

      如果需要,您还可以将一些道具传递到那里的那些组件。 现在,如果选项卡内容的内容非常相似,则可以创建一个 通用render()组件,只是传递道具会像const panes = [ { menuItem: "Tab 1", render: () => <TabContent1 {/* can pass props here */} /> }, { menuItem: "Tab 2", render: () => <TabContent2 /> }, { menuItem: "Tab 3", render: () => <TabContent3 /> } ]

    • 与上一个示例相同,但是除了创建新组件(如果您认为它太麻烦了)之外,只需创建一个单独的TabContent方法并在dropdownOptions={...}中创建renderTabContent()像这样:

      panes

      同样,您可以将某些内容传递给此方法,例如render(),以使它们每个都返回不同的内容。或者,您可以为每个标签内容创建不同的const panes = [ { menuItem: "Tab 1", render: () => this.renderTabContent( /* can pass something here as well */ )}, { menuItem: "Tab 2", render: () => this.renderTabContent() }, { menuItem: "Tab 3", render: () => this.renderTabContent() } ] dropdownOptions等。在这些方法中,您可以轻松访问renderTabContent1

这是一个{#3}}示例,带有#2解决方案。我仅创建了一个renderTabContent2组件,但我相信您将能够领会这个想法并实现其他组件