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

我猜测会发生的事情是单击第一个选项卡，渲染大小写'tab-1'，但没有任何变化。我在做什么错了？

我尝试在{showTab}之后打电话给</Tabs>，但是我没有工作。

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

使用onClick事件渲染JSX开关盒

1 个答案: