Me gustaría lograr lo siguiente con mi menú desplegable.

1 - Mostrarlo al hacer clic

2-Escóndelo con el segundo clic

3 - Escóndelo al hacer clic en cualquier lugar fuera de él.

4 - Haz todo eso con un efecto deslizante

Tengo 1-3 cubiertos. Estoy bloqueado en 4.

¿Cómo crearía un efecto de diapositiva junto con el siguiente evento de clic que se produce a continuación?

Tengo una prueba de concepto que funciona usando el slideToggle de jQuery (no se muestra aquí) ... sin embargo, me gustaría aprender cómo hacerlo en la forma de reacción.

en caso de que quieras ver el código completo:reaccionar barra de navegación desplegable

// 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>
        )
    }
}