реагировать семантическим интерфейсом, как изменить компонент при переключении вкладки? - PullRequest
Новая
       7

реагировать семантическим интерфейсом, как изменить компонент при переключении вкладки?

0 голосов
/ 08 апреля 2019

Как изменить компонент, когда я переключаю вкладки? Я передаю реквизиты компоненту, и мне нужно обновить его. Есть идеи? 

const panes = [
      {
        menuItem: "In process",
        render: () => (
          <Tab.Pane>
            <RespondentsData stepId="_init_" />
          </Tab.Pane>
        ),
      },
      {
        menuItem: "No answer",
        render: () => (
          <Tab.Pane>
            <RespondentsData stepId="_wait_" />
          </Tab.Pane>
        ),
      },
]

<Tab
 className="respondents-tab"
 menu={{ secondary: true, pointing: true }}
 panes={this.panes()}
/>

1 Ответ

0 голосов
/ 08 апреля 2019

Вы могли бы иметь panes функцию, которая принимает опору и каждый раз возвращает новый массив панелей.Затем, когда вы выбираете новую вкладку, вы можете использовать onTabChange для ее обновления следующим образом: 

const Content = ({ children }) => <h1>{children}</h1>;

const panes = count => 
   [
    {
      menuItem: "Tab 1",
      render: () => (
        <Tab.Pane>
          <Content>Count is: {count}</Content>
        </Tab.Pane>
      )
    },
    {
      menuItem: "Tab 2",
      render: () => (
        <Tab.Pane>
          <Content>Count is: {count}</Content>
        </Tab.Pane>
      )
    },
    {
      menuItem: "Tab 3",
      render: () => (
        <Tab.Pane>
          <Content>Count is: {count}</Content>
        </Tab.Pane>
      )
    }
  ];

function TabExampleSecondary() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <Tab
        onTabChange={increment}
        menu={{ secondary: true }}
        panes={panes(count)}
      />
    </div>
  );
}

Вот рабочий пример: https://codesandbox.io/embed/6lyzz0xo2n

...