react高阶组件包裹的组件如何操作高阶组件内的state?

Question

写了一个高阶组件const fn=(Com)=>{    return class A extends Comonents{         state={             list         }        return <Com  {...this.props}/>     } } const NewCom = fn(Com);NewCom 如何操作修改 list

Answer 1

向子组件传递方法，然后在子组件里面调用该方法。

const fn=(Com)=>{    return class A extends Component{
        state={
            list
        }
        handleList = () => {           // to do ...
           this.setState({
             list: ...
           })
        }        return <Com handleList={this.handleList} {...this.props}/>
    }
}

class Com extends Components {
    state = {}
    handleList = () => this.props.handleList()    
    return (
        ....
    )
}

Answer 2

普通组件怎么操作，高阶组件就怎么操作

const fn=(Com)=>{    return class A extends Comonents{
        state={
            list
        }
        componentDidMount(){
            fetch('/XXX')
            .then(res=>{
                ...                this.setState({...});
            })
        }
        render(){            return <Com  {...this.props}/>
        }
    }
}

const NewCom = fn(Com);