我们可以从DOM中删除元素吗？

123

穆罕默德·阿西夫（Muhammad Asif Javed）

我在事件句柄上动态创建了很多react组件。代码受到打击：

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中删除单个元素。即它将是一个用户操作组件，或者在某些特殊情况下我想删除，其他组件保持不变。

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

布兰登

您错过了React的要点。您无需手动修改元素树。您声明性地将属性/状态映射到元素，然后让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组件之外（即，应用程序中的其他位置），这就是您要做的事情。如果“用户动作”在您的React组件中作为事件发生，您将只调用render一次，而App会将节点保留为state，并且仅调用this.setState({ node: modifiedNodes });来更改状态，这将导致React更新您的DOM。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。