ел бы сделать следующее с помощью моего выпадающего меню.

1 - показать по клику

2 -Скрыть по второму клику

3 - Скрыть его при нажатии в любом месте за его пределами.

4 - Делайте все это с эффектом слайда

У меня есть 1-3 покрыты. Я заблокирован на 4.

Как создать эффект слайда вместе со следующим событием клика, происходящим ниже?

У меня есть рабочее доказательство концепции с использованием slideToggle в jQuery (здесь не показано) ... однако, я хотел бы узнать, как это сделать реагирующим образом.

на тот случай, если вы хотите увидеть полный код:реагировать выпадающий навигационная панель

// CASE 1 Show Hide on click, no slide effect yet  
class ServicesDropdown extends Component {
    constructor() {
        super();
        this.state = {
            dropdown: false
        };
    }

    handleClick = () => {
        if (!this.state.dropdown) {
            // attach/remove event handler
            document.addEventListener('click', this.handleOutsideClick, false);
        } else {
            document.removeEventListener('click', this.handleOutsideClick, false);
        }

        this.setState(prevState => ({
            dropdown: !prevState.dropdown,
        }));
    }

    handleOutsideClick = (e) => {
        // ignore clicks on the component itself
        if (this.node.contains(e.target)) {
            return;
        }
        this.handleClick();
    }

    render() {
        return (
            <li ref={node => { this.node = node; }}>
                <a href="#!" onClick={this.handleClick}>Services +</a>
                {this.state.dropdown && 
                (
                    <ul className="nav-dropdown" ref={node => { this.node = node; }}>
                    <li><a href="#!">Web Design</a></li>
                    <li><a href="#!">Web Development</a></li>
                    <li><a href="#!">Graphic Design</a></li>
                    </ul>

                )}
            </li>
        )
    }
}