使用onClick事件呈现JSX开关案例

Question

我尝试使用onClick事件调用切换大小写验证，但我的DOM没有更新。这是我的代码：

function app() {
  const showTab = tabContentID => {
    switch (tabContentID) {
      case 'tab-1':
        return <TabContent id='tab-1'>Patients Content</TabContent>;
      case 'tab-2':
        return <TabContent id='tab-2'>Recents Content</TabContent>;
      case 'tab-3':
        return <TabContent id='tab-3'>Favorites Content</TabContent>;
      default:
        return <TabContent id='tab-1'>Patients Content</TabContent>;
    }
  };
  return (
    <div>
      <Tabs initialTab='tab-1' activeTabIndex='9999'>
        <Tab tabContentID='tab-1' onClick={() => showTab('tab-1')}>
          Tab 1
        </Tab>
        <Tab tabContentID='tab-2' onClick={() => showTab('tab-2')}>
          Tab 2
        </Tab>
        <Tab tabContentID='tab-3' onClick={() => showTab('tab-3')}>
          Tab 3
        </Tab>
      </Tabs>
    </div>
  );
}

我推测会发生的情况是，单击第一个选项卡，呈现case 'tab-1'，但没有任何变化。我哪里做错了？

我试着在我的</Tabs>之后调用{showTab}，但是我没有工作。

Answer 1

您将从函数返回jsx，但从未指定插入点。您可以将返回值与州的变量关联起来，如下所示

class Component extends React.Component{
    state = {
        content : null
    }

    showTab = tabContentID => {
        switch (tabContentID) {
            case 'tab-1':
                return this.setState({content: <TabContent id='tab-1'>Patients Content</TabContent>})
            case 'tab-2':
                return this.setState({content: <TabContent id='tab-2'>Recents Content</TabContent>})
            case 'tab-3':
                return this.setState({content: <TabContent id='tab-3'>Favorites Content</TabContent>})
            default:
                return this.setState({content: <TabContent id='tab-1'>Patients Content</TabContent>})
        }
    }

    render(){
        const { content } = this.state
        return (
            <div>
                <Tabs initialTab='tab-1' activeTabIndex='9999'>
                    <Tab tabContentID='tab-1' onClick={() => this.showTab('tab-1')}>
                        Tab 1
                    </Tab>
                    <Tab tabContentID='tab-2' onClick={() => this.showTab('tab-2')}>
                        Tab 2
                    </Tab>
                    <Tab tabContentID='tab-3' onClick={() => this.showTab('tab-3')}>
                        Tab 3
                    </Tab>
                </Tabs>
                {content}
            </div>
        )
    }
}