Question

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

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

Codesandbox的以下代码。

App

Answer 1

例如，我可以想到以下解决方案：

查看您的布局，我认为不需要将状态传递给窗格的渲染方法，因为您没有Dropdown组件。因此，您只需根据Dropdown的值定义activeIndex的选项即可。
如果您想在标签内容中移动Dropdown组件（嗯，这很有意义），那么您可以
- 为每个标签内容创建单独的组件（TabContent1，TabContent2等-可以找出更合适的名称），然后在{{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组件，但我相信您将能够领会这个想法并实现其他组件

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

1 个答案: