如何重构有状态的React组件？

Question

I have a stateful Key component that represents a Key in a Keyboard like so:

        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 is used to detect a touch event.

• onTouchStart handler changes active state to true .

• Component re-renders with the appropriate css to give key clicked effect.

• After 150ms, active state is set to false using resetActiveState() .

• Component re-renders without the key clicked effect css.

conditionalProps attribute is used to conditionally add css styles (using css attribute selector) to achieve 'key pressed' look in the rendered component.

This works as expected but I was wondering if it would be possible to refactor the component so I can extract the logic to maybe a parent component which I can then extend using the Key component.

Answer 1

This would be a perfect use case for a Higher Order Component .

This will allow you to abstract much of the functionality and pass it down to stateless components as props.

The React official docs do a great job of explaining how to use HOCs.