High-level components A
import React from "react"
const A = WrappedComponent =>{
class HOC extends React.Component {
constructor(props){
super(props);
this.WCRef = React.createRef();
}
componentDidMount(){
// state
console.log(this.WCRef.current.state)
}
render(){
return {
<div>
A
<WrappedComponent ref={this.WCRef} />
</div>
}
}
}
return HOC
}
export default ACommon component B
import React from "react"
import A from "./A" //A
class MyComponent extends React.Component {
state = {
test: "Bstate"
}
render(){
return (
<div>
B
</div>
)
}
}
export default A(MyComponent) the above components work normally, but after MyComponent uses withStyles of Material-UI , A component cannot get state of MyComponent .
import React from "react"
import A from "./A" //A
import PropTypes from "prop-types"
import withStyles from "@material-ui/core/styles/withStyles"
const styles = theme =>({
root:{
backgroundColor: theme.palette.primary.main
}
});
class MyComponent extends React.Component {
state = {
test: "Bstate"
}
render(){
const {classes} = this.props;
return (
<div className={classes.root}>
B
</div>
)
}
}
MyComponent.propTypes = {
classes:PropTypes.object.isRequired
};
export default A(withStyles(styles)(MyComponent))