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);

Answer 3

生命周期?props?

Answer 4

const fn=(Com)=>{
    return class A extends Comonents{
        state={
            list
        }
        return <Com list={this.state.list} {...this.props}/>
    }
}