react 高阶组件取state

Question

高阶组件 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 A

普通组件 B

import React from 'react'
import A from './A' //高阶组件A

class MyComponent extends React.Component {
    state = {
        test: '组件B的state'
    }
    
    render(){
        return (
            <div>
            我是普通组件B
            </div>
        )
    }
}

export default A(MyComponent)

以上组件正常工作 ，但在MyComponent使用了Material-UI的withStyles后，A组件中就取不到MyComponent的state了

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: '组件B的state'
    }
    
    render(){
        const {classes} = this.props;
        return (
            <div className={classes.root}>
            我是普通组件B
            </div>
        )
    }
}

MyComponent.propTypes = {
    classes:PropTypes.object.isRequired
};

export default A(withStyles(styles)(MyComponent))

仅是把A(MyComponent)变为A(withStyles(styles)(MyComponent))就不工作了。有没有办法既保留withStyles，又能使用A能取到MyComponent的state？？

Answer 1

找到了个解决的方法
高阶组件A

render(){
    const {classes,...otherProps} = this.props;
    
    ...
    // 不要把高阶组件的样式传给子组件
    <WrappedComponent {...otherProps}/>
}

普通组件

import {compose} from "redux";

...

export default compose(
    A,
    withStyles(styles),//这个要放在自定义组件后
)(MyComponent)

/* 或者

export default A(withStyles(styles)(MyComponent))

*/