在原生 dom 元素中使用 react 组件的方法答案

【问题标题】：Using methods of react component in native dom element在原生 dom 元素中使用 react 组件的方法
【发布时间】：2026-01-02 07:45:01
【问题描述】：

我正在使用 React 和 Fluxxor 来创建一个类似于树的可视组件。对于树中的每个节点，我想提供基本功能，例如删除/编辑节点或添加新子节点。所以每个节点都有自己的下拉菜单用于这些操作，下拉菜单是使用MaterializeCss Framework 完成的，最初我在渲染方法中创建了它们中的每一个，但后来导致了一个 React 错误，我通过在render 函数，用于菜单的 ul 是在 componentDidMount 函数中使用 Jquery 在 body 元素上的 append 创建的。问题是我想将这些动作中的每一个都映射到 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] }。

【问题讨论】：

能否请您在完成后开源树查看器？
如果我的回答有帮助，您能告诉我吗？
@DeepakPrasanna 它确实有帮助，非常感谢，我最初的想法是在 render 方法中渲染 ul 菜单，但这会导致不变的违规，因为我正在使用的插件在初始化时修改了 DOM下拉菜单。
好的@Peter 我会在我完成后在此处发布代码链接，可能在周末

标签： javascript html reactjs dom dom-events

【解决方案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>
    ...
}

【讨论】：