Is it possible to remove an item from the DOM?

Question

I create many dynamically responsive components on an event descriptor. Code gets hit:

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'));

Now I want to remove one element from dom. that is, it will be a user action component or I want to remove it in some special case, and the other component will remain the same.

Using refs, we are dealing with the actual dom, so refs are not applicable in this case.

Answer 1

You’re missing the React option. You do not manually modify the item tree. You declaratively map properties / state to elements and let React make all changes.

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.imtqy.com/react/blog/2015/10/01/react-render-and-top-level-api.html

: , , " " React (.. ). " " React, render , state this.setState({ node: modifiedNodes });, , React DOM.

Answer 2

node, .

push, slice, concat ..

. node.push( {id: id, key: key })

node.splice()