如何使sematic-ui-react Tab响应？

Question

我正在开发一个React应用程序，最近我开始使用语义ui react模块。

不幸的是，我无法使Tab对象响应...

一个非常简单的脚本可以显示以下内容：

import React from 'react'
import { withRouter } from 'react-router-dom'

import {Tab} from 'semantic-ui-react';

// import NavSection from './NavSection'

var sections = ["SectionA","SectionB","SectionC","SectionD","SectionE","SectionF"]

const NavigatorHeader = () => (
<div>
  <h1>Navigator</h1>
  <div>
    <Tab menu={{ pointing: true }} panes={getPanes(sections)} />
  </div>
</div>
)

export default withRouter(NavigatorHeader)


function getPanes(sections){
  return sections.map( function(section){
    return {
      menuItem: section,
      render: () =>
        <Tab.Pane attacched="false">
          <div>
            <p>
            Some Text that we can change tab from tab. E.g. with the title: <b>{section}</b>
            </p>
          </div>
        </Tab.Pane>
    }
  })
}

选项卡看起来不错，内联，但是如果我缩小屏幕，它们只会溢出，而我希望它们会移至第二行。

看起来这来自我正在使用的Selenium-ui CSS（https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css）。当前版本是2.3.1，但是如果我回去使用2.0.0之前的版本，则它是响应式的。是否有办法获得与新版本相同的行为？

谢谢，米歇尔。谢谢，米歇尔。

Answer 1

根据先前的答案，我找到了一种更简单的方法来实现这一目标。

我用建议的值定义了CSS：

.wrapped{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

然后将那个额外的类传递给菜单

<Tab menu={{ pointing: true, className: "wrapped" }} panes={getPanes(sections)} />

这样就解决了这个问题，而无需任何其他JavaScript。