Question

我正在使用React和Fluxxor来创建一个像可视组件的树。对于树中的每个节点，我想提供删除/编辑节点或添加新子节点等基本功能。所以每个节点都有自己的下拉菜单用于这些操作，下拉菜单是用MaterializeCss Framework完成的，最初我在render方法中创建了每个节点但是然后导致了我通过渲染标签触发器解决的React错误在render函数中，使用Jquery附加在body元素上的componentDidMount函数中创建用于菜单的ul。问题是我想将这些操作中的每一个映射到React组件中定义的函数，但是它没有工作，它永远不会被调用，我该怎么做。

var ItemOferta = React.createClass({
mixins: [FluxMixin],
componentDidMount: function() {
    var id = "dd"+this.props.item.self.id;
    $("body").append(
        "<ul id='"+id+"' class='dropdown-content'>"+
        "<li><a href='javascript:void(0)'>Agregar hijo</a></li>"+
        "<li><a href='javascript:void(0)'>Editar</a></li>"+
        "<li><a href='javascript:void(0)' onclick='"+this.eliminar+"'>"+
        "Eliminar</a></li></ul>");
},
componentWillUnmount: function(){
    var id = "#dd"+this.props.item.self.id;
    $(id).remove();
},
eliminar: function(e){
    console.log("En el metodo eliminar");
    this.getFlux().actions.eliminarNivel(this.props.item.self.id);
},
render: function(){
     ...
     <div className="acciones">
         <a href="#" className="accion dropdown-button" 
            data-activates={"dd"+this.props.item.self.id}>
            <i className="mdi-navigation-more-vert"></i>
         </a>
     </div>
    ...
    );
}

}）;

我省略了渲染方法的一些代码，我只发布了下拉触发器的代码，正如你在onclick属性中看到的那样我尝试绑定this.eliminar函数，但是当我用chrome工具检查它时出现的是这个“function（）{[native code]}”

Answer 1

你正在做的是反对React的原则。更改DOM元素将成为React的DOM 分歧荒谬。你可以修改你的代码，如下所示。 但强烈不推荐。

componentDidMount: function() {
    var id = "dd"+this.props.item.self.id;
    var ulMarkup = "<ul id='"+id+"' class='dropdown-content'>"+
                   "<li><a>Agregar hijo</a></li>"+
                   "<li><a>Editar</a></li>"+
                   "<li><a class='eliminar'>Eliminar</a></li></ul>"

    var ulElement = $(ulMarkup).appendTo('body');

    $(ulElement).find("a").click(function() { return false; });
    $(ulElement).find("a.eliminar").click(this.eliminar);
}

以React方式执行此操作的正确方法如下所示。

render: function(){
     ...
     <div className="acciones">
         <a href="#" className="accion dropdown-button" 
            data-activates={"dd"+this.props.item.self.id}>
            <i className="mdi-navigation-more-vert"></i>
         </a>
         <ul className='dropdown-content'>
           <li><a>Agregar hijo</a></li>
           <li><a>Editar</a></li>
           <li><a onClick={this.eliminar}>Eliminar</a></li>
         </ul>
     </div>
    ...
}

使用native dom元素中的react组件的方法

1 个答案: