New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
What about refs? #183
Comments
I think so yes, your smart component with the |
@cymen you can use a ref callback for this :) const decorator = (Base) => {
return class {
render() {
return <Base {...this.props} />
}
}
}
@decorator
class Test {
render () {
return <div ref={this.props.refCallback}>my div</div>;
}
}
class Wrapper {
componentWillMount() {
this.nestedRef = null;
}
componentDidMount() {
console.log(React.findDOMNode(this.nestedRef));
}
setNestedRef = (ref) => {
this.nestedRef = ref;
}
render() {
return <Test refCallback={this.setNestedRef} />
}
} The above will log the div. Maybe this helps? This uses a decorator, but It would probably just work as well if you passed a callback to your components which you nested inside |
Do you really need a nested ref? If you just want to access the DOM node, you can do If you want to call methods, consider using Finally, if you're certain you need a ref, yeah, you can grab a nested ref like @johanneslumpe suggested in #183 (comment). |
Closing, please let me know if something isn't clear. |
Sorry but I do not see how encouraging the use of 'findDOMNode' in such a trivial case can even be considered a solution. This is an anti-pattern! It's returns us to days of jquery where we need to access all element and know exactly the hierarchy of the nodes. Your docs rightfully read : 'findDOMNode() is an escape hatch... use of this escape hatch is discouraged because it pierces the component abstraction' |
I’m not sure what you mean. I’m saying that, if you need a reference to the rendered node (for example, to calculate its offset and size), you can use That said if you’re not happy with this, just use ref callback props as suggested above. |
I don't think we should depend on |
@xvalentino findDOMNode is not necessary. See the bits related to |
If I use a
<Connector>
around some components that have aref
attribute, I can no longer access it viathis.refs
. I just refactored a bit to fix it -- I am guessing this is kind of in the vain of smart versus dumb components. Or am I missing something simple?The text was updated successfully, but these errors were encountered: