Как в react class component ипользовать React.useState?

Question

[Иван Симонов]

Добрый день
Есть код

class MyClass extends React.Component {
    constructor(props) {
        super(props);        
    }
    render() {
        const [current, setCurrent] = React.useState('one')
        return (
            <section className="section">
                <Tab value="one" active={current === 'one'} onClick={setCurrent}>One</Tab>
                <Tab value="two" active={current === 'two'} onClick={setCurrent}>Two</Tab>
            </section>
        )
    }
}

Соотв. получаю ошибку, что необходимо использовать function component.
Подскажите, как использовать React.useState в class component? Это возможно?

Comments

[0xD34F]

Вам это не нужно.

получаю ошибку, что необходимо использовать function component

Ну вот и используйте.

Answer 1

[Andrey Shock]

Возможно, но в данном случае классовые компоненты не делают жизнь проще

class MyClass extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          current: 'one'
        };
    }
    render() {
        return (
            <section className="section">
                <Tab value="one" active={this.state.current === 'one'} onClick={() => this.setState({current: 'one'})}>One</Tab>
                <Tab value="two" active={this.state.current === 'two'} onClick={() => this.setState({current: 'two'})}>Two</Tab>
            </section>
        )
    }
}

Answer 2

[Родион Мещеряков]

useState - это хук, а хуки используются только в функциональных компонентах.

import React from 'react';

function MyClass() {
    const [current, setCurrent] = React.useState('one');

    return (
        <section className="section">
            <Tab value="one" active={current === 'one'} onClick={setCurrent}>One</Tab>
            <Tab value="two" active={current === 'two'} onClick={setCurrent}>Two</Tab>
        </section>
    )
}

Полагаю, что в вашем примере setCurrent самостоятельно подхватывает параметр из value соответствующего компонента <Tab>.