Connected components may not be stateless
babakness opened this issue · comments
The component returned by connect
doesn't allow for refs ie <Component ref='foobar' />
. React gives warning "Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail."
For reference my current workaround is to connect explicitly using const boundActions = bindActions(actions,store)
then to do something like the following
<Foo ref="bar" {...boundActions} {...store.getState()} />
Along with store.subscribe( () => this.forceUpdate() )
Hi @babakness, thanks for this.
Do you have a solution in mind?
I think this is partially resolved in master via #98.
connect
was changed to return a regular Component instead of a function. However, ref
might point to the outer HOC, not the wrapped component as you may want.
Maybe the solution to this is to pass down the ref
prop to the component that's being HOC'd.
What you think @babakness, @jetako?
@matheusml I would consider following the approach taken by react-redux. connect
accepts an opt-in withRef
option. When true, ref
points to the wrapped component.
@jetako ok, that's a valid option.
Could you please open a PR with this?
@matheusml Afraid I won't have the bandwidth for this any time soon. @babakness ?
export default function connect(mapToProps, actions = {}) {
return Child => {
return React.forwardRef((props, ref) => {
return (
<Connect {...props} mapToProps={mapToProps} actions={actions}>
{mappedProps => <Child ref={ref} {...mappedProps} {...props} />}
</Connect>
);
});
};
}
I need this feature... I will work on it after #119
To imprementing the solution using React.forwardRef
we need to upgrade React to at least React 16.3
And, as recommended is React Docs, increase a major version of redux-zero.
This is OK, @matheusml?
Yes it is, @leobetosouza