I am trying to use a JavaScript library in React.
The library does it does dom manipulation. e.g. when I click on a row, it adds dom elements to show the detail content of that row.
So In my React component, I did
export default class MyReactComponent extends React.Component {
private _ref: React.RefObject<HTMLDivElement>;
constructor(props) {
super(props);
this._ref = React.createRef();
}
componentDidMount() {
const container = this._ref.current;
var myJSLibrary = new JSLibrary(container);
}
render() {
return (
<div>
<div ref={this._ref}/>
</div>
);
}
}
When I run it, I do see myJSLibrary get display. But when I click it, I see this exception in my Chrome console:
Warning: render(...): It looks like the React-rendered content of this container was removed without using React. This is not supported and will cause errors. Instead, call ReactDOM.unmountComponentAtNode to empty a container.
Can you please tell me what am I missing so that React will let the ‘myJSLibrary’ does it own DOM manipulation.
Thank you.