我如何用类组件实现这样的逻辑答案

【问题标题】：How i can realize such logic with class components我如何用类组件实现这样的逻辑
【发布时间】：2021-08-17 23:29:50
【问题描述】：

我如何通过类组件实现这一点。我如何在类组件中替换钩子 useState 以及在哪里可以学习。

 function App() {
      const [state, setState] = useState(0);
      const switchingTabs = (e, value) => {
        setState(value);
      };
    
  return (
    <div className="App">
      <Container>
        <AppBar className="bar" position="static">
          <Tabs value={state} onChange={switchingTabs}>
            <Tab label="tab 1"></Tab>
            <Tab label="tab 2"></Tab>
          </Tabs>
        </AppBar>
        <TabBackbone value={state} index={0}></TabBackbone>
        <TabBackbone value={state} index={1}></TabBackbone>
        <Content></Content>
      </Container>
    </div>
  );

【问题讨论】：

这能回答你的问题吗？ How to use React hook in a react class?

标签： reactjs

【解决方案1】：

您可以在此处了解有关类组件中本地状态的更多信息：

https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class

关于你的功能组件到类组件的可能转换：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { tab: 0 };
  }

  switchingTabs(event, value) {
    this.setState({
      tab: value
    });
  }

  render() {
    return (
      <div className="App">
        <Container>
          <AppBar className="bar" position="static">
            <Tabs value={this.state.tab} onChange={this.switchingTabs}>
              <Tab label="tab 1"></Tab>
              <Tab label="tab 2"></Tab>
            </Tabs>
          </AppBar>
          <TabBackbone value={this.state.tab} index={0}></TabBackbone>
          <TabBackbone value={this.state.tab} index={1}></TabBackbone>
          <Content></Content>
        </Container>
      </div>
    );
  }
}

【讨论】：