javascript - 编辑高阶和低阶组件之间的状态

Question

我有这个层次。期刊页面和一个期刊组件都是类组件

现在，当我想编辑从Low Order到High Order的内容时。我通过 props 传递一个函数。然后在低阶组件ex中使用它。

JournalPage.js

            <OneJournal
            accounts={this.state.Accounts}
            journal={value}
            onJournalDelete={this.handleOneJournalDelete}
            totalAccounts={this.state.TotalTypes}
            handleOneJournalChange={this.handleOneJournalChange} <=== the function which edit the highr order via low order

我的问题是如何在不使用第三方库的情况下从高阶组件编辑低阶组件中的状态值？

标签： javascriptreactjsreact-reduxweb-componenthigher-order-functions

Answer 1

形成我所理解的你想从孩子那里更新父组件状态你可以这样做

class childrenComp extends Component {

    updateState = ()=> {
        this.props.updateState({title: 'edit'})
    }
    render() {
        return (
            <div>
                
            </div>
        )
    }
}

class Parent extends Component {
    state = {
        title: ''
    }
    render() {
        return (
            <childrenComp setState={this.setState}>
                
            </childrenComp>
        )
    }
};