反应语义ui，切换标签时如何重新呈现组件？

Question

切换标签时如何重新呈现组件？我将道具传递给组件，我需要更新它。有任何想法吗？

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()}
/>

Answer 1

你可以让panes成为一个函数，它接受一个prop并且每次都返回一个新的窗格数组。然后，当您选择一个新选项卡时，您可以使用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