javascript - 我们如何在 Reactjs 中动态删除元素

Question

我动态创建了很多元素。我有一个状态数组，用于记录元素。当我添加更多元素时，它们会与之前的数组元素相连接。这是代码。

var App = React.createClass({
  getInitialState: function() {
    return {
      propsList: []
      };
   },
  addProps: function(props) {
    var propsList = this.state.propsList.concat([props]);
      this.setState({ propsList: propsList });
        },
  render: function() {
    var components = this.state.propsList.map(function(props) {
      return React.createElement('g', props);
        });
    return React.createElement('div', null, components);
      }
  });
  ReactDOM.render(
      React.createElement(App, null),
      document.getElementById('svg')
    );

我想删除执行点击操作的元素(g 标签)。我曾尝试使用 refs 但它没有用，因为数组存储了太多元素。

Answer 1

请注意，如果“用户操作”发生在您的 React 组件之外(即应用程序中的其他地方)，您就会这样做。如果“用户操作”作为您的 React 组件中的事件发生，您只会调用一次渲染，而 App 会将节点保持为状态，并且只会调用 this.setState({ node: modifiedNodes });更改状态，这将导致 React 更新您的 DOM。

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