我如何重構我的有狀態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組件擴展。

來源

2017-04-17 fsociety

這對於Higher Order Component來說是一個完美的用例。

這將允許您抽象大部分功能並將其傳遞給無狀態組件作爲道具。

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

來源

2017-04-17 15:06:59 Toby

謝謝你的迴應。這看起來非常有前途！也許可以用可重用的邏輯編寫父組件並將其擴展到子組件中？ HOC似乎是要走的路。但我也想知道這種針對HOC的方法的缺點。 – fsociety

如果你的意思是繼承，那麼React團隊已經[非常清楚]（https://facebook.github.io/react/docs/composition-vs-inheritance.html），他們更喜歡合成而不是繼承。但是，爲子組件提供道具的父組件實際上只是組件組合，而HOC實際上只是構成組件的更強大的方式。 – Toby

我完成了一個HOC實現，一切都很好。但我遇到了一個我認爲值得我在這裏發佈的新問題的兩難境地。 http://stackoverflow.com/questions/43471019/access-wrapped-component-function-from-hoc 請看看時間允許:) – fsociety

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

回答

相關問題