我们可以从DOM中移除一个元素吗？

我在事件句柄上动态创建了很多反应组件。的代码被赋予打击：我们可以从DOM中移除一个元素吗？

var node = []; //this is update with properties on user action and an element is creaed 
var node = Interfaces.Embroidery.node; 
var components = node.map(function(props) { 
    return React.createElement('g', { 
     id: props.id, 
     key: props.id 
    }, 
    React.createElement('path', props)); 
}); 

var App = React.createClass({ 
    render: function() { 
    return React.createElement('div', null, components); 
    } 
}); 


ReactDOM.render(React.createElement(App), document.getElementById('parentDrawingNode'));

现在我想从DOM删除单个元件。即它将是一个用户操作组件，或者我想在某些特殊情况下删除并且其他组件保持不变。

通过使用refs我们正在处理实际的dom因此refs不适用于这种情况。

来源

2015-12-01 Muhammad Asif Javed

你缺少阵营的地步。您不要手动修改元素树。您声明性地将属性/状态映射到元素，并让React完成所有修改。

var App = React.createClass({ 
    render: function() { 
    // Get the node from the passed-in props 
    var node = this.props.node; 

    // generate the child components 
    var components = node.map(function(props) { 
     return React.createElement('g', { 
     id: props.id, 
     key: props.id 
     }, 
     React.createElement('path', props)); 
    }); 

    // render them in a div 
    return React.createElement('div', null, components); 
    } 
}); 


// first time it will create the DOM 
// after that it just modifies the DOM 
function renderApp(node, element) { 
    ReactDOM.render(React.createElement(App, { node: node }), element); 
} 

// Call when you want to get rid of the App completely 
// and cleanup memory without reloading the page 
function destroyApp(element) { 
    ReactDOM.unmountComponentAtNode(element); 
} 

// Initial render 
var node = Interfaces.Embroidery.node; 
renderApp(node, document.getElementById('parentDrawingNode')); 

function updateNodeOnSomeUserActionThatHappensOutsideOfReact(...) { 
    node.push(...); // or whatever modification you want 

    // re-render 
    renderApp(node, document.getElementById('parentDrawingNode')); 
}

了解更多关于这种风格在这里：https://facebook.github.io/react/blog/2015/10/01/react-render-and-top-level-api.html

注意这是如果“用户行为”正在发生的反应的组分之外，你会怎么做（即应用程序的其他地方）。如果“用户操作”作为React组件中的事件发生，则只会调用render一次，而应用程序会将节点保存为state，并且只会调用this.setState({ node: modifiedNodes });来更改状态，这会导致React更新您的DOM。

来源

2015-12-01 15:54:21 Brandon

由于您使用数组node创建反应元素，因此您可以根据后续操作添加或删除元素。

推，切片，CONCAT等等

即node.push({id: id, key: key })添加元素

node.splice()删除元素

来源

2015-12-01 15:19:42 oobgam

我们可以从DOM中移除一个元素吗？

回答

相关问题