简体   繁体   中英

Is there a function similar to jQuery's .empty() in React?

This is admittedly an edge case. I'm trying to work with a plugin that requires you create a New Instance on every update. I'm wondering if React offers a helper method to empty a Component's DOM upon receiving new props.

Here's a code sample below to clarify:

export default React.createClass({
  displayName: 'Item',
  contextTypes: {
    router: React.PropTypes.func
  },

  propTypes: {
    items: React.PropTypes.object.isRequired
  },

  getInitialState() {
    return AppStore.getState();
  },

  componentDidMount() {
    this.renderSVG();
  },

  componentWillReceiveProps() {
    this.renderSVG();
  },

  renderSVG() {
    const {id}: string = this.context.router.getCurrentParams();
    this.item = this.props.items[id];
    this.classString = 'svg-container-' + this.item.id;
    // TODO: find a solution for side-effects linting error
    new Vivus(React.findDOMNode(this), {type: 'delayed', duration: 100, file: this.item.url});
  },

  render() {
    return (
      <div className={this.classString}></div>
    );
  }
});

This achieves the desired effect.

 componentWillReceiveProps() {
    React.findDOMNode(this).removeChild(React.findDOMNode(this).childNodes[0]);
    this.renderSVG();
  },

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM