如何重構有狀態的React組件？

Question

我有一個有狀態的Key組件，它表示鍵盤中的鍵，如下所示：

        import React from 'react';

        class Key extends React.Component {

            constructor(props) {
                super(props);
                this.state = {
                    id: props.id,
                    customClass: props.customClass,
                    value: props.value,
                    onAction: props.onAction,
                    active: false
                };

                this.handleAction = this.handleAction.bind(this);
                this.resetActiveState = this.resetActiveState.bind(this);
            }

            handleAction(e) {
                e.preventDefault();
                this.setState ({
                    active: true
                });
                this.state.onAction(this.state.value);

    //remove key pressed effect after 150 ms by resetting active state
                _.delay(() => this.resetActiveState() , 150);
            }

            resetActiveState() {
                this.setState ({
                    active: false
                });
            }

            render() {
//conditionalProps is empty when active is false.
                let conditionalProps = {};
                let className = `default-btn ${this.state.customClass}`;
                let displayValue = this.state.value;

    //enable css attribute selector
                if (this.state.active){
                    conditionalProps['data-active'] = '';
                }
                    return (
                        <button id={this.state.id} key={this.state.id} className={className}
                                data-value={this.state.value} {...conditionalProps} onTouchStart={this.handleAction}>
                            {displayValue}
                        </button>
                    );

            }
        }

        Key.defaultProps = {
            customClass: '',
            onAction: (val) => {}
        };

        export default Key;

• onTouchStart用於檢測觸摸事件。

• onTouchStart處理程序將active狀態更改為true 。

• Component使用適當的CSS重新渲染以提供按鍵效果。

• 150ms之后，使用resetActiveState()將active狀態設置為false。

• 組件重新渲染，而沒有單擊效果css。

conditionalProps屬性用於有條件地添加css樣式（使用css屬性選擇器），以在呈現的組件中實現“按鍵”外觀。

這可以按預期工作，但是我想知道是否可以重構該組件，以便可以將邏輯提取到父組件，然后可以使用Key組件進行擴展。

Answer 1

對於高階組件來說，這將是一個完美的用例。

這將允許您抽象出許多功能，並將其作為道具傳遞給無狀態組件。

React官方文檔在解釋如何使用HOC方面做得很好。