Многоразовый выпадающий с React Hooks - PullRequest
Новая
       6

Многоразовый выпадающий с React Hooks

3 голосов
/ 08 марта 2019

Как я понял из документации React, использование перехватчиков не требует большого рефакторинга кода и может быть легко включено в существующий код. Я хочу сделать выпадающие списки многократного использования, вызываемые из метода рендеринга реагирующего компонента. Вот мой код: 

//navigation.js
import {DropdownToggler} from './dropdown.js';
export class ErrorTriangle extends Component {
   render(){
     return(
        {DropdownToggler({uiElement: {
            toggler: <img src={MyImg}/>,
            field: <div className={'errorMessage'}>
                       <p>Dropdown content</p>
                   </div >
        }})
       }
     )
   }
}

//dropdown.js
import React, {useEffect, useRef, useState} from "react";
import {store} from "../api/redux/store";

const DropdownToggler = (props) => {
    const myRef = useRef(null);
    const [showField, setShow] = useState(false);
    const isMobile = store.getState().isMobile;

   const remove = (e) => {
    e.stopPropagation();

    if (myRef && myRef.current.contains(e.target)) {
        return
    }
    setShow(false);
    if (isMobile===true) {
        document.removeEventListener('touchend', remove, false)
    } else {
        document.removeEventListener('mouseup', remove, false)
    }
};

const show = (e) => {
    e.stopPropagation();
    if (showField) {
        return
    }
    setShow(true);
    if (isMobile===true) {
        document.addEventListener('touchend', remove, false)
    } else {
        document.addEventListener('mouseup', remove, false)
    }
};

return (
    <>
        {React.cloneElement(props.uiElement.toggler, {
            onTouchEnd: (e) => show(e),
            onMouseUp: isMobile ? null : (e) => show(e)
        })}

        {showField ? React.cloneElement(props.uiElement.field, {ref: node => myRef.current= node}) : null}
    </>
)
};
export {DropdownToggler};

И получите ошибку: хуки могут вызываться только внутри тела компонента функции. Я уже проверил существующую информацию об этой проблеме:

  1. версия реагирующего горячего загрузчика - 4.8.0
  2. Моя реакция и реакция - это одна и та же версия 16.8.4;

  3. Мой babel-config содержит: 

    'use strict';

module.exports = {
   presets: ['@babel/preset-env', '@babel/preset-react'],
   plugins: ["@babel/plugin-proposal-class-properties", "jsx-control-statements", "react-hot-loader/babel"],
};

Может быть, проблема в том, что я нарушаю правила хуков https://reactjs.org/warnings/invalid-hook-call-warning.html. Буду благодарен за подробные объяснения (примеры) или идеи, почему это не работает.

1 Ответ

2 голосов
/ 08 марта 2019

Изменение 

export class ErrorTriangle extends Component {
   render(){
     return(
        {DropdownToggler({uiElement: {
            toggler: <img src={MyImg}/>,
            field: <div className={'errorMessage'}>
                       <p>Dropdown content</p>
                   </div >
        }})
       }
     )
   }
}

Для 

export function ErrorTriangle (props) {
     return(
        {DropdownToggler({uiElement: {
            toggler: <img src={MyImg}/>,
            field: <div className={'errorMessage'}>
                       <p>Dropdown content</p>
                   </div >
        }})
       }
     )
}

OR

Изменить 

{DropdownToggler({uiElement: {
            toggler: <img src={MyImg}/>,
            field: <div className={'errorMessage'}>
                       <p>Dropdown content</p>
                   </div >
        }})
       }

К 

{<DropdownToggler uiElement={{
    toggler: <img src={MyImg}/>,
    field: <div className={'errorMessage'}>
                <p>Dropdown content</p>
            </div >
  }}/>
}

Объяснение

Проще говоря, если вы используете класс, вы должны вызывать функцию компонента следующим образом <Component />, а не как обычную функцию Component(), или вы можете перейти от использования класса к использованию функции компонента

...