I can't get the react-gsap-enhancer to work properly.
After I added:
import GSAP from 'react-gsap-enhancer';
...
and:
@GSAP()
export default class MyComponent extends React.Component {
..
I get this error message:
{"message":"Cannot connect GSAP Enhancer to an element with an existing string ref. Please convert it to use a callback ref instead, or wrap it into a or
Ref attributes can be strings or functions. If it is a function (callback ref) React will call it with the component when it's mounted. This enhancer using this callback refs to get the DOM of every element. If the element already have a callback ref it's going to be wrapped so nothing will change but it can't be done with string refs.
TL;DR So the string refs have to be migrated to callback refs if the enhanced components.
Example:
change
<MyComp ref='foo'/>
to
<MyComp ref={comp => this.foo = findDOMNode(comp)}/>
I copied this error message from React DND but it's could be more helpful. I will change it.
Hope this resolves your problem, thanks for trying react-gsap-enhancer out and making an issue!
Hi, sorry to bump this issue, but I suspect a common gotcha with this solution. When setting the ref like that on a Component, you get the React class, not the DOM element. So you cannot animate it directly.
I'm now using ReactDOM.findDOMNode(this.foo), which works fine, but it's not highly recommended because it breaks encapsulation. (It says so on the page you linked in the bottom of your post)
Anyway, for people looking for a quick fix:
<MyComponent ref={ comp => this.foo = ReactDOM.findDOMNode(comp) }/>
@micros123 Yes, this is true if you referencing a "composite component" (not like div, span, etc.).
Thanks for mentioning this. I updated my example above to be more general.
I can't get the react-gsap-enhancer to work properly.
After I added: import GSAP from 'react-gsap-enhancer'; ... and: @GSAP() export default class MyComponent extends React.Component { ..
I get this error message: {"message":"Cannot connect GSAP Enhancer to an element with an existing string ref. Please convert it to use a callback ref instead, or wrap it into a or. Read more: https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute"}
Any thoughts?
Thanks!
Hi @andreasnaslund!
Ref attributes can be strings or functions. If it is a function (callback ref) React will call it with the component when it's mounted. This enhancer using this callback refs to get the DOM of every element. If the element already have a callback ref it's going to be wrapped so nothing will change but it can't be done with string refs.
TL;DR So the string refs have to be migrated to callback refs if the enhanced components. Example:
I copied this error message from React DND but it's could be more helpful. I will change it.
Hope this resolves your problem, thanks for trying react-gsap-enhancer out and making an issue!
More About Refs
Hey @andreasnaslund, did this resolve your problem or you still have some trouble at using react-gsap-enhancer?
Hi, sorry to bump this issue, but I suspect a common gotcha with this solution. When setting the
reflike that on a Component, you get the React class, not the DOM element. So you cannot animate it directly. I'm now usingReactDOM.findDOMNode(this.foo), which works fine, but it's not highly recommended because it breaks encapsulation. (It says so on the page you linked in the bottom of your post) Anyway, for people looking for a quick fix:<MyComponent ref={ comp => this.foo = ReactDOM.findDOMNode(comp) }/>If you have a better idea I'd love to hear it.
@micros123 Yes, this is true if you referencing a "composite component" (not like div, span, etc.). Thanks for mentioning this. I updated my example above to be more general.