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

问题描述：

我有一个状态Key组件表示，像这样的键盘按键：我如何重构我的有状态React组件？

 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重新渲染，给予key点击的效果。
经过150ms后，使用resetActiveState()将active状态设置为false。
组件重新呈现没有键单击效果CSS。

conditionalProps属性用于有条件地添加CSS样式（使用CSS属性选择器），以实现看在渲染分量“按下的键”。

这个按预期工作，但我想知道是否可以重构组件，这样我就可以将逻辑提取到可能的父组件，然后使用Key组件扩展。

答

这对于Higher Order Component来说是一个完美的用例。

这将允许您抽象大部分功能并将其传递给无状态组件作为道具。

React官方文档在解释如何使用HOC方面做了很多工作。

谢谢你的回应。这看起来非常有前途！也许可以用可重用的逻辑编写父组件并将其扩展到子组件中？ HOC似乎是要走的路。但我也想知道这种针对HOC的方法的缺点。 – fsociety

如果你的意思是继承，那么React团队已经[非常清楚]（https://facebook.github.io/react/docs/composition-vs-inheritance.html），他们更喜欢合成而不是继承。但是，为子组件提供道具的父组件实际上只是组件组合，而HOC实际上只是构成组件的更强大的方式。 – Toby

我完成了一个HOC实现，一切都很好。但我遇到了一个我认为值得我在这里发布的新问题的两难境地。 http://*.com/questions/43471019/access-wrapped-component-function-from-hoc 请看看时间允许:) – fsociety

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

相关推荐