Как использовать состояния внутри UI компонента?

В общем то решил сделать для себя небольшую UI библиотеку, допустим на Tailwind.
Она у меня лежит в отдельном NPM-пакете или подключена через npm link.

Eсть пара ситуаций когда компонент должен иметь своё локальное состояние, вопрос, как это реализовать?

У меня функциональные компоненты, например:
func

import React, { useState } from "react";

export const TestBlock = () => {
    const [state, setState] = useState(null);

    return (
        <button onClick={() => setState(Date.now())}>
            blablabla
        </button>
    )
}


Всё это великолепие падает потому что
"Invalid hook call. Hooks can only be called inside of the body of a function component" и тд.

При этом компонент на классах всё ок.
class

import React from "react";

export class TestBlockClass extends React.Component<{}, { timestamp: number }> {

    constructor(props: any) {
        super(props);
        this.state = { 
            timestamp: 0
        };
    }

    render() {
        return (
            <>
                <div>
                    Time {this.state.timestamp}
                </div>
                <button onClick={() => this.setState({timestamp: Date.now()})}>
                    тык
                </button>
            </>
        )
    }
}



Что делать, как быть?
Или все таки использовать классы?
  • Вопрос задан
  • 239 просмотров
Решения вопроса 1
@Enma Автор вопроса
в общем проблема в npm link

чтобы решить нужно в конфиге webpack добавить:

resolve: {
        extensions: [".ts", ".tsx", ".js"],
        alias: {
            react: path.resolve('./node_modules/react'),
        },
    },
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
Seasle
@Seasle Куратор тега JavaScript
\( ゚ヮ゚)/
https://codesandbox.io/s/qna-q-1107640-miil1 не воспроизводится, значит чего-то не сказали.
Ответ написан
Aetae
@Aetae Куратор тега TypeScript
Тлен
Ты должен делать с ним <TestBlock/> или React.createElement(TestBlock), а ты где-то делаешь просто TestBlock().
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы