類似的反應的組分具有不同的邏輯

我想有一個可重複使用的部件，包括一個標題和多個。

標題是很簡單的，因爲它只是一個字符串，我可以作爲道具使用發送

但數量將在組件的每個實例以不同的方式來計算。

問題

有沒有乾淨地寫這樣的成分？

我的想法

我在想，在組件內部，我將有一個

calculate: function() { 
    switch(title) { 
     case 'floorp': 
      //... 
     case 'not_floorp': 
      //... 
    } 
}

我也將需要至少六個不同的情況下，可能（實際上很可能）更晚，所以可擴展性是一個重要因素。

這是的的方式做到這一點，還是我俯視的東西？

來源

2016-07-09 Alec

我會單獨從組件中計算器邏輯，只讓組件擔心渲染視圖。只需使組件依賴於計算器，以便縮放並可重複使用。

下面是一個將所有計算器放在一個文件中的例子，但是您當然不需要這樣做，如果您需要每個計算器都可以在自己的文件中（因此這種方法可以提供靈活性）。

calculators.js

var CALCULATORS = { 
    add: function(a,b){ return a + b; }, 
    subtract: function(a,b){ return a - b; }, 
    suprise: function(){ return Math.random(); } 
};

然後你只傳遞一個計算器您的組件，像這樣：

<ReactDOM.render(<MyComponent title="floorp" calculator={CALCULATORS.add}/>, docu...);

您的組件內部：

calculate: function() { 
    //This will equate to '30' since we passed it the 'add' calculator above 
    return this.props.calculator.call(this, 10, 20); 
}

來源

2016-07-09 02:47:54 jennas

是的，這是更模塊化和乾淨的方式。謝謝！ – Alec

:)祝你好運與您的應用程序@Alec – jennas

我想我與詹納斯的做法略有不同。我認爲組件應該只接收簡單的字符串/整數title和number，並且計算邏輯應該在父級組件或容器中的某個位置上層進行。

考慮到這一點，無論如何，您正在爲每種計算類型編寫一個不同的函數，爲什麼還要把它傳遞給組件？爲什麼不直接在組件外進行計算並傳遞明確的值？

這實現了兩個目標：

你有一個更愚蠢的組成部分，因爲這是很好的：
- 啞成分更簡單，更容易測試和共享組件的唐
- 消費者不需要知道它是如何工作的，他們只需要知道它需要什麼。例如，函數需要計算什麼值？
你聚集你的應用程序邏輯，更爲重要的地方，在那裏可以更容易地管理

然而，要充分回答我認爲這將有助於瞭解的問題：

這個組件是什麼？
它在什麼情況下？
- 這是一個「2日到期」通知的待辦事項嗎？
- 它是一個可拖動的，它的x和y座標是通過鼠標移動來計算的嗎？
還有誰會使用它？只有你？其他人？

來源

2016-07-09 06:56:26 jaybee

是的，我必須承認我也考慮過父組件的方式:)這很棘手，因爲我們沒有看到你提到的應用程序的完整上下文。我也喜歡這種方法，如果你這樣做，我仍然會從父組件中分離計算器（只需導入它們）。將業務邏輯與視圖分離開來是一種很好的習慣。這意味着即使它們可以重複使用並進行單元測試。 – jennas

同意，計算應該肯定是從其他地方輸入的。 – jaybee

類似的反應的組分具有不同的邏輯

回答

相關問題