在本機DOM元素中使用反應組件的方法

我正在使用React和Fluxxor來創建樹狀視覺組件。對於樹中的每個節點，我想提供基本功能，如刪除/編輯節點或添加新的子節點。因此，每個節點都有它們自己的下拉菜單，這些下拉菜單是用MaterializeCss Framework完成的，最初我在渲染方法中創建了它們中的每一個，但是之後導致了一個React錯誤，我通過在渲染函數內渲染標記觸發器，並且在菜單中使用的ul是在componentDidMount函數中使用Jquery對body元素的附加來創建的。問題是我想將這些動作中的每一個映射到React組件中定義的函數上，但是它不能正常工作，它永遠不會調用，我怎麼能這樣做。在本機DOM元素中使用反應組件的方法

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]}」

來源

2015-02-23 cvalentina

請問您可以請開放源代碼樹查看器一次完成嗎？ – Peter 2015-02-23 09:19:54

如果我的答案有幫助，你能否讓我知道？ – Deepak 2015-02-24 12:48:32

@DeepakPrasanna它實際上有所幫助，非常感謝，我最初的想法是在渲染方法中渲染ul菜單，但這會導致不變的違規，因爲我使用的插件在初始化下拉列表時修改了DOM。 – cvalentina 2015-02-24 23:50:10

你在做什麼是違反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); 
}

做它做出反應的方法是像下面的正確的做法。

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> 
    ... 
}

來源

2015-02-23 16:07:25 Deepak

在本機DOM元素中使用反應組件的方法

回答

相關問題