React - 重构类组件以将部件移动到功能组件[重复]答案

【问题标题】：React - refactoring class component to move parts to functional compontent [duplicate]React - 重构类组件以将部件移动到功能组件[重复]
【发布时间】：2021-01-04 07:45:46
【问题描述】：

我有以下类组件 -

https://pastebin.com/WigZksAq

我想将面板移动到单独的文件 -

const Panel1 = props => (
    <Panel id='Panel1'>
    <PanelHeader>Panel 1</PanelHeader>
    <Group>
    <CellButton onClick={ () => this.setState({ activePanel: 'panel2' }) }>
        Go to panel 2
    </CellButton>
    </Group>
    </Panel>
);

但是我不明白如何修改主类组件的状态。

【问题讨论】：

在你的父级中，添加一个修改状态的函数。现在将它作为道具传递给孩子。

标签： javascript reactjs

【解决方案1】：

好的，我找到了解决办法：

<Panel1 id='Panel1' go={active_panel => this.setState({ activePanel: active_panel })}></Panel1>

在父组件中，并且

<CellButton onClick={props.go.bind(this, 'panel2')}>
    Go to panel 2
</CellButton>

它看起来很丑但是很好用，以后我打算开始使用redux。

【讨论】：