javascript - helmet - react fragment vs div

Menú del botón derecho utilizando React JS

Question

Me gustaría saber si hay una forma recomendada / correcta de configurar un menú de clic derecho para un componente React.

Actualmente tengo este ...

// nw is nw.gui from Node-Webkit
componentWillMount: function() {
    var menu = new nw.Menu();
    menu .append(new nw.MenuItem({
        label: ''doSomething'',
        click: function() {
            // doSomething
        }
    }));

    // I''d like to know if this bit can be done in a cleaner/more succinct way...
    // BEGIN
    var that = this;
    addEventListener(''contextmenu'', function(e){
        e.preventDefault();
        // Use the attributes property to uniquely identify this react component 
        // (so different elements can have different right click menus)
        if (e.target.attributes[0].nodeValue == that.getDOMNode().attributes[0].nodeValue) {
            menu.popup(e.x, e.y);
        }
    })
    // END
},

Esto funciona, pero se siente un poco desordenado y me preguntaba si habría otro método que pudiera usar, cualquier información sería muy apreciada.

¡Gracias!

Answer 1

ACTUALIZAR:

Lo descubrí - esto es lo que puedes hacer

var addMenu;

componentWillMount: function() {
    addMenu = new nw.Menu();
    addMenu.append(new nw.MenuItem({
        label: ''doSomething'',
        click: function() {
            // doSomething
        }
    }));
},

contextMenu: function(e) {
    e.preventDefault();
    addMenu.popup(e.clientX, e.clientY);
},

render: function(){
    return <button onClick={this.handleClick} onContextMenu={this.contextMenu}>SomethingUseful</button>
}

En el procesamiento, puede pasar una función a onContextMenu para cuando se haga clic con el botón derecho para este componente de reacción.

Answer 2

Hay algunas cosas que cuidar con los menús emergentes:

1. debe estar alejado de sus padres y hermanos, preferiblemente en una superposición que es el último hijo de document.body
2. la lógica especial debe tener cuidado de que siempre se muestre en la pantalla y nunca se recorte por los bordes de la pantalla
3. si hay una jerarquía involucrada, las ventanas emergentes secundarias deben alinearse con los elementos de la ventana emergente anterior (abridor).

Creé una biblioteca que puedes usar para lograr todo esto:

http://dkozar.github.io/react-data-menu/