Closed jacksenior closed 6 years ago
It's not a bad pattern but in the context of React, composition over inheritance is preferred. For example, instead of sharing a render() through inheritance, you can create an SFC and render that instead.
function Baz({ children, styles, ...props }) {
return <div {...props} className={styles.string}>{children}</div>;
}
export default withStyles({
string: {
backgroundColor: 'red',
},
},
{
styleName: 'Baz',
})(Baz);
class Bar extends React.Component {
getString() {
return 'Bar';
}
render() {
return <Baz>{this.getString()}</Baz>
}
}
class Foo extends Bar {
getString() {
return 'Foo';
}
render() {
return <Baz>{this.getString()}</Baz>
}
}
Thanks for getting back to me, that's exactly what I ended up doing
Cool, glad you got it working!
Given then example above I'm attempting to extend a react component to share the render and common methods. However it appears that only the styles can be extended as this results in the equivalent of
this.props.styles.string
throwing the error,TypeError: Cannot read property 'string' of undefined
when the extended component Foo is ran.Is there a way to extend the base component but not the styles or is this a bad pattern?