将函數放在對象的Value上，然後傳給元件執行，實作元件抽象

情景

在我們開發中，我們通常需要對某一系列的元件Coding, 但我們是程式員啊，我們怎麼能容忍代碼重複出現的壞味道呢。是以，對于一些列相同的操作我們就要用到循環處理了。

目标

我們需要将底部兩個按鈕

建立詢價

和

采購助手

展示出來，并且點選他們的操作後有不同的互動。

coding

對于此情況，我們需要将對兩個按鈕做抽象，抽象為數組，在render函數裡循環執行即可，這裡有個地方需要說明一下，我們把事件處理函數也放在了抽象好的對象上，如下

const tools = [
      {
        index: 1,
        image: images.tabs.newEnquiryTool,
        title: '建立詢價',
        onPress: () => {
          this.props.controlToolVisible(false)
          Actions.newEnquiry()
        },
      },
      {
        index: 2,
        image: images.tabs.purchaseAsstant,
        title: '采購助手',
        onPress: () => {
          Chatlogin().then(data => {
            if (data) {
              this.props.getAccountInfo(_.get(global.USER_INFO, 'imInfo.mpcAccId'))
                .then(chatInfo => {
                  this.props.controlToolVisible(false)
                  Actions.chat({
                    session: {
                      contactId: 123,
                      name: '31231',
                      sessionType: '0'
                    }
                  })
                })
                .catch(console.error)
            }
          })
        },
      },
    ]           

在render函數裡我們循環即可實作代碼的抽象

{
    tools.map((tool) => (
      <TouchableOpacity style={styles.toolWrapper} key={tool.index} onPress={tool.onPress} >
         <Image source={tool.image} />
         <Text style={styles.text}>{tool.title}</Text>
      </TouchableOpacity>))
}
           

總結

代碼總是可以解決很多問題，在Coding 時，應該及時重構，将代碼中的壞味道及時剔除，為以後業務功能開發解決技術債。