在原生 dom 元素中使用 React 组件的方法
Using methods of react component in native dom element
我将 React 与 Fluxxor 结合使用来创建树状可视化组件。对于树中的每个节点,我想提供基本功能,例如 deleting/editing 节点或添加新子节点。所以每个节点都有自己的这些操作的下拉菜单,下拉菜单是用 MaterializeCss Framework 完成的,最初我在 render 方法中创建了它们中的每一个,但随后导致了一个 React 错误,我通过渲染 a 标签触发器解决了这个错误在 render 函数中,用于菜单的 ul 是在 componentDidMount
函数中使用 Jquery 对 body 元素的追加创建的。问题是我想将这些操作中的每一个映射到 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>
...
);
}
});
我省略了render方法的一些代码,我只贴了下拉触发器的代码,正如你在onclick
属性中看到的那样我尝试绑定this.eliminar
函数,但是当我用Chrome工具检查了一下,都是这个function () { [native code] }
.
你这样做是违反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>
...
}
我将 React 与 Fluxxor 结合使用来创建树状可视化组件。对于树中的每个节点,我想提供基本功能,例如 deleting/editing 节点或添加新子节点。所以每个节点都有自己的这些操作的下拉菜单,下拉菜单是用 MaterializeCss Framework 完成的,最初我在 render 方法中创建了它们中的每一个,但随后导致了一个 React 错误,我通过渲染 a 标签触发器解决了这个错误在 render 函数中,用于菜单的 ul 是在 componentDidMount
函数中使用 Jquery 对 body 元素的追加创建的。问题是我想将这些操作中的每一个映射到 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>
...
);
}
});
我省略了render方法的一些代码,我只贴了下拉触发器的代码,正如你在onclick
属性中看到的那样我尝试绑定this.eliminar
函数,但是当我用Chrome工具检查了一下,都是这个function () { [native code] }
.
你这样做是违反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>
...
}