2

In the React documentation for "Integrating with Other Libraries", it mentions at least two ways to integrate other libraries. One involves wrapping the code with a React component (example at the bottom).

If I use this approach, would I basically not be able to pass in properties to the component? What if this component is a child of a regular React component which itself could render nothing? Could that cause any problems with the non-React component?

https://reactjs.org/docs/integrating-with-other-libraries.html

class SomePlugin extends React.Component {
  componentDidMount() {
    this.$el = $(this.el);
    this.$el.somePlugin();
  }

  componentWillUnmount() {
    this.$el.somePlugin('destroy');
  }

  render() {
    return <div ref={el => this.el = el} />;
  }
}
user994165
  • 9,146
  • 30
  • 98
  • 165
  • 1
    It's not possible for a component to be a child of something that renders nothing. by definition it is no longer a child anymore. – azium Aug 20 '18 at 22:19
  • It's also an anti-pattern to manipulate the DOM outside of React. – Tyler Sebastian Aug 20 '18 at 22:31
  • @TylerSebastian it's not exactly an antipattern. the section of the docs are explicitly talking about how to deal with this circumstance when it arises – azium Aug 20 '18 at 22:52
  • According to a related SO question, class based components are passé for React > 16.8. => What would be a function based approach to include third party libraries, e.g. render a dc.js chart on a placeholder element that is provided by react and update the data for my custom chart component vie props? – Stefan Nov 22 '22 at 07:08

0 Answers0