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

Question

[JeanPaulBelmondo]

В общем то решил сделать для себя небольшую 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>
            </>
        )
    }
}

Что делать, как быть?
Или все таки использовать классы?

Comments

[Philipp]

Можно попробовать прописать тип, что это функциональный компонент.
export const TestBlock: React.FC = () => {};

Answer 1

[JeanPaulBelmondo]

в общем проблема в npm link

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

resolve: {
        extensions: [".ts", ".tsx", ".js"],
        alias: {
            react: path.resolve('./node_modules/react'),
        },
    },

Answer 2

[Александр]

https://codesandbox.io/s/qna-q-1107640-miil1 не воспроизводится, значит чего-то не сказали.

Comments

[JeanPaulBelmondo]

У вас в примере обычный компонент, который буквально лежит в этой же папке,конечно всё будет ок)

Проблема только в том случае если компонент находится в npm пакете

[Alexandroppolus]

Enma,

Проблема только в том случае если компонент находится в npm пакете

это вообще никаким боком.
покажи, где и как вызывается TestBlock

[JeanPaulBelmondo]

Alexandroppolus,

spoiler

import React from 'react';
import { TestBlock, TestBlockClass } from 'test-ui'

export const App = () => {
  return (
    <div>
      <TestBlock />
      <TestBlockClass />
    </div>
  )
}

классовый компонент работает - функциональный нет.

и да, если я перенесу функциональный компонент в папку с приложением, то всё ок, но мне то нужно в пакете

[insighter]

ну а если через функцию сделать?

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

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

[JeanPaulBelmondo]

insighter, абсолютно тоже самое

[insighter]

Enma,
вот эту секцию проверяли?
https://ru.reactjs.org/warnings/invalid-hook-call-...

[JeanPaulBelmondo]

insighter, да, в общем-то очевидно что проблема из-за npm link

правда как её править в create-react-app, без webpack - не очень понятно)

Answer 3

[Aetae]

Ты должен делать с ним <TestBlock/> или React.createElement(TestBlock), а ты где-то делаешь просто TestBlock().

Comments

[JeanPaulBelmondo]

Нет, я его пытаюсь отрисовывать как обычный компонент, т. е. , я не настолько дремучий)

Но если компонент находится в пакете, а не папке с проектом - ошибка, о которой я написал