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

You could have panes be a function that takes a prop and returns a new array of panes every time. Then, when you select a new tab, you could use onTabChange to update it like this:

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>
  );
}

Here's an working example: https://codesandbox.io/embed/6lyzz0xo2n

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

1 个答案: