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.