Используйте хуки в классе, которые не отображаются - PullRequest
Новая
       3

Используйте хуки в классе, которые не отображаются

0 голосов
/ 03 августа 2020
• 1000 *

У меня тоже класс Bluetooth. Здесь находятся все важные функции Bluetooth. Причина, по которой он находится в собственном классе, заключается в том, что мне нужен этот код, доступный повсюду в приложении (включая список устройств (упомянутые выше ion-items), которые он создает). Я делаю это так: 

const _Bluetooth = () => {

    const [state, setState] = useState([]);
    useEffect(() => {
        addDevice();
    }, [state]);

    const devices: any[] = [];

    const bluetoothInitialize = () => {

        for (let i = 0; i < 5; i++) {
            let a = {name: "test", mac: i.toString(), connected:false}
            setState({found: [...state.found, a]});
        }
    }

    const connect = (id) => {
        console.log("connecting");
    }

    const addDevice = () => {
        let d = state.found[state.found.length - 1]
        devices.push(<BluetoothDeviceItem key={d.mac} mac={d.mac} name={d.name} onClick={(id) => connect(id)} connectingState={d.connected ? 'connected' : 'not_connected'}></BluetoothDeviceItem>);
    }

    return {
        devices, bluetoothInitialize, connect
    };
}

export default _Bluetooth;

Затем я создаю экземпляр этого класса в другом файле, который действует как глобальный файл, а затем другие файлы импортируют этот глобальный файл, предоставляя доступ к этому экземпляру класса: 

import _Bluetooth from '../components/bluetooth/Bluetooth'

export const Bluetooth = _Bluetooth();

К сожалению, класс _Bluetooth не работает. Поскольку я использую ловушку, React ожидает, что компонент будет отрисован, и поэтому компонент должен вернуть JSX. Однако я хочу, чтобы он возвращал не JSX, а доступные функции и переменные. Как я уже сказал выше, я использую эти хуки больше как состояния, но только из-за функции useEffect. Я мог бы легко заставить это работать, выполнив: 

const state = {found: []}

, а затем напрямую отправив элементы в массив. Это лишает меня возможности использовать useEffect, что немного упрощает мою жизнь, но также немного очищает код.

Можно ли использовать хуки без рендеринга компонентов / возврата JSX?

...