如何編寫React中的效用函數而不會混淆它自己的組件

我已經使用3個組件顯示api中的weatherforcaset來構建這個小反應應用程序。我不知道我是如何處理單獨節點模塊中的utils函數是正確的方式，因爲它很漂亮，主要是處理日期和使用從api接收的數據創建另外5個數組。如何編寫React中的效用函數而不會混淆它自己的組件

https://github.com/c-science1/weatherForecastReact/

請能有人告訴我，如果有，如果做同樣的更好的辦法？

非常感謝！

來源

2017-06-22 S Saad

看起來您可以儘量減少函數中的代碼，同時保持DRY原則。你應該重構下面的方法：

this.createNewLists = function (dayName, itemP){ 
     let itemDate = new Date(itemP.dt_txt); 
     let currentDate = new Date(); 
     let nextDate = new Date(); ; 

     if (itemDate.getDate() == currentDate.getDate()){ 
      this.day1.push(itemP); 
      this.day1Name = dayName; 
     } 

     nextDate.setDate(nextDate.getDate() + 1); 
     if (itemDate.getDate() === nextDate.getDate()){ 
      this.day2.push(itemP); 
      this.day2Name = dayName; 
     } 

     nextDate.setDate(nextDate.getDate() + 1); 
     if (itemDate.getDate() === nextDate.getDate()){ 
      this.day3.push(itemP); 
      this.day3Name = dayName; 
     } 

     nextDate.setDate(nextDate.getDate() + 1); 
     if (itemDate.getDate() === nextDate.getDate()){ 
      this.day4.push(itemP); 
      this.day4Name = dayName; 
     } 

     nextDate.setDate(nextDate.getDate() + 1); 
     if (itemDate.getDate() === nextDate.getDate()){ 
      this.day5.push(itemP); 
      this.day5Name = dayName; 
     } 
    }

在該函數的模式都在重複他們，你可以更好地組織這些代碼。

您可以從1到5（對於工作日）進行迭代並最小化您的代碼並保留乾淨的代碼和DRY principle。

來源

2017-06-22 11:56:54

我會說你的應用程序的大小就好了。關於我可能做不同的事情，我不會使用函數包裝函數，因爲您已經有了充當名稱空間的模塊。

至於weatherImage函數我可能會把它放到使用它的組件文件中。如果有多個組件使用它，我可能會將其放入components/common.js。 createNewLists也可能會去這個模塊。

來源

2017-06-22 11:57:19

非常感謝您的兩個好處！很有意義。 –

就像老蘇美爾人曾經說過的那樣，沒有人說謝謝你對答案進行投票;） –

如何編寫React中的效用函數而不會混淆它自己的組件

回答

相關問題