但是你不想為你定義的每個輸入想出一些聰明和獨特的id，誰有時間呢？我不知道你，但我有山羊的視頻觀看。

（提示：如果您的航班上有一個尖叫的孩子，閉上眼睛，假裝您在YouTube上觀看的山羊聽起來像人類的視頻，煩人的聲音就會變得很熱鬧。）

您可以為每個輸入/標簽對生成隨機ID，但是客戶端呈現的HTML將與您呈現的服務器呈現的HTML不匹配。這并不是一個好的解決方案
所以，你可以創建一個小的模塊，給出一個遞增的ID，并在輸入組件中使用它，像這樣：

class Input extends React.Component {
  constructor(props) {
    super(props);
    this.id = getNextId();
    
    this.onChange = this.onChange.bind(this);
  }
  
  onChange(e) {
    this.props.onChange(e.target.value);
  }
  
  render() {
    return (
      
        {this.props.label}
        
        
      
    );
  }
}

如果getNextId()每次只是增加一個數字，然后在服務器上渲染時，這個數字會繼續上升和起來，最終達到無窮大。因此，您需要在每次呈現應用程序時重置該數字（對于每個網絡請求）。

你可以在你的應用程序的入口點，使用一個簡單的resetId（）或任何你認為最好的名稱。

考慮到所有這些，你的超級幻想模塊可能看起來像這樣：

let count = 1;

export const resetId = () => {
  count = 1;
}

export const getNextId = () => {
  return `element-id-${count++}`;
}

當你想在不同的實例（例如"primary"和"secondary"按鈕）應用不同的CSS，你可以傳遞道具來控制要應用的CSS。

這看起來超級簡單的表面，但讓我向你保證有很多錯誤的方法來做到這一點（我已經嘗試過他們！）。

有 - 我估計 - 三種不同的方式，你可以控制應用于組件的CSS。

也許你的一些按鈕有圓角，但這不直接對應于您定義的主題。

在這種情況下，你可以坐下你的設計師，并有一致性談話，或創建一個布爾的道具，可能看起來像這樣：

Hello

就像HTML的二進制屬性一樣，你不需要做round = {true}。

設置值

在某些情況下，您可能希望直接傳遞CSS屬性的值（在組件中將其設置為內聯樣式）。

一個例子

假設您正在創建鏈接組件。你通過你的網站的設計和工作，有三個不同的主題，有時他們有一個下劃線，有時他們不。

下面是我將如何設計該組件：

const Link = (props) => {
  let className = `link link--${props.theme}-theme`;
  
  if (!props.underline) className += " link--no-underline";

  return {props.children};
};

Link.propTypes = {
  theme: PropTypes.oneOf([
    "default", // primary color, no underline
    "blend", // inherit surrounding styles
    "primary-button", // primary color, solid block
  ]),
  underline: PropTypes.bool,
  href: PropTypes.string.isRequired,
  children: PropTypes.oneOfType([
    PropTypes.element,
    PropTypes.array,
    PropTypes.string,
  ]).isRequired,
};

Link.defaultProps = {
  theme: "default",
  underline: false,
};

增加CSS...

.link--default-theme,
.link--blend-theme:hover {
  color: #D84315;
}

.link--blend-theme {
  color: inherit;
}

.link--default-theme:hover,
.link--blend-theme:hover {
  text-decoration: underline;
}

.link--primary-button-theme {
  display: inline-block;
  padding: 12px 25px;
  font-size: 18px;
  background: #D84315;
  color: white;
}

.link--no-underline {
  text-decoration: none;
}

你可能已經注意到鏈接 - 無下劃線的選擇器是沒必要存在的， 因為他雙重否定了。

故事時間：我曾經認為寫CSS更少的CSS是目標，但它不是。我寧愿有一些雙重否定和多選擇器規則集，如果它的意思是樣式以一個很好的分層方式應用的話。

我相信我以前說過，但縮放網站最困難的事情是CSS。 JavaScript很容易，但是隨意使用CSS使你很遭罪 - 一旦你開始混亂，這是不容易中途修改來解決的。

真實的事實：CSS的特異性是網絡開發人員死亡的第一原因。如果你在一臺大型計算機上，請查看頂部導航欄中的小通知圖標的CSS。

這個通知圖標是由很多CSS樣式組合在一起的。很復雜。

二十三條規則。

這不包括繼承自十一個其他規則的樣式。行高多帶帶被覆蓋九次。

如果line-height是一只貓，它現在已經死了。

這不能令人愉快地維護。

有了React，我們可以做得更好。我們可以仔細設計哪些類應用于我們的組件。我們可以刪除全局樣式和移動它所有在我們的Button.scss。我們可以消除對文件的特異性和順序的所有依賴。

附注： 我夢想著有一天游覽器對于樣式沒有自己的看法(意思就是所有游覽器都變得統一， 完全去IE化-。-)。

5. The switching component

切換組件是呈現最多的組件之一。

這可能是一個顯示多個頁面之一的組件。或選項卡集中的選項卡，或模態組件中的不同模態。

我曾經使用switch語句，進一步到實際傳入我想要渲染的組件。然后從組件本身導出對組件的引用（命名為exports，然后作為組件上的屬性）。

真是一堆可怕的想法！

我現在的方法是使用一個對象傳遞props給Page組件。

import HomePage from "./HomePage.jsx";
import AboutPage from "./AboutPage.jsx";
import UserPage from "./UserPage.jsx";
import FourOhFourPage from "./FourOhFourPage.jsx";

const PAGES = {
  home: HomePage,
  about: AboutPage,
  user: UserPage,
};

const Page = (props) => {
  const Handler = PAGES[props.page] || FourOhFourPage;
  
  return 
};

Page.propTypes = {
    page: PropTypes.oneOf(Object.keys(PAGES)).isRequired,
};

PAGES對象的key可以在prop類型中使用，以捕獲dev時間錯誤。

然后，我們當然會使用這樣。

如果你用key替換home，about和user分別用/， /about和/user，你差不多就是個路由器了。

（未來的想法：再見 react-router。）

6. Reaching into a component

如果您正在尋找一個簡單的方法來請求您的用戶輸入信息，那么你可以添加自動對焦到輸入組件， 當用戶一個頁面的時候。這種設計僅僅適用于登陸操作就在主頁面內執行， 而不是多帶帶彈出一個模態窗口。

你可以通過給輸入組件一個id，然后使用document.getElementById（"user-name-input"）。focus（）來將用戶的焦點集中在輸入組件上。

這工作，但不是正確的方式。在你的應用程序中依靠兩個字符串匹配的事情越少越好。
這可以正常的工作， 但確不是最好的方式。 在你的代碼中依靠兩個字符串匹配的事情越少越好。

幸運的是，有一個非常容易的方法來做到這一點“正確”：

class Input extends Component {
  focus() {
    this.el.focus();
  }
  
  render() {
    return (
       { this.el = el; }}
      />
    );
  }
}

真是酷炫屌炸天！ 一個具有focus（）方法的輸入組件，用于聚焦HTML元素。

在父組件中，我們可以獲得對Input組件的引用并調用其focus（）方法。

class SignInModal extends Component {
  componentDidMount() {
    this.InputComponent.focus();
  }
  
  render() {
    return (
      

        User name: 
         { this.InputComponent = comp; }}
        />
      
    )
  }
}

注意，當在組件上使用ref時，它是對組件（而不是底層元素）的引用，因此您可以訪問其方法。

7. Almost-components

假設您正在構建一個組件，以便您可以搜索人員。在您輸入時，您會看到一個可能匹配的名稱和照片列表。這樣的東西。

（我正在尋找政治諷刺，因為我像大家一樣，對其他人對政治的看法極為感興趣。）

當設計此組件時，您可能會想到自己：該列表中的每個項目都是自己的SearchSuggestion組件？它真的只有幾行HTML和CSS，也許不是？但我曾經被告知“如果有疑問，創造另一個組件”。

哦，我的，這是相當稀爛的一個泡菜，不是嗎？

如果我是做這個，我不會有一個多帶帶的組件。相反，只是一個renderSearchSuggestion方法返回每個條目的適當的DOM。然后結果就是下面的代碼示例這樣：

const SearchSuggestions = (props) => {
  // renderSearchSuggestion() behaves as a pseduo SearchSuggestion component
  // keep it self contained and it should be easy to extract later if needed
  const renderSearchSuggestion = listItem => (
    
{listItem.name} {listItem.id}
  );
  
  return (
    

      {props.listItems.map(renderSearchSuggestion)}
    
  );
}

如果事情變得更復雜，或者您想在其他地方使用此組件，則應該能夠將代碼復制/粘貼到新組件中。

不要過早組件化。組件不像茶匙;你可以有太多。(意思組件可以隨便復制， 但是茶匙不行)

8. Components for formatting text

當我第一次開始使用React時，我想到組件應該是一個大東西，一種分組DOM的結構塊的方法。但這樣組件表現的很一般。

這里是一個組件，它接受一個數字，并返回一個漂亮的字符串，有或沒有小數和一個"$"符號。

const Price = (props) => {
    const price = props.children.toLocaleString("en", {
      style: props.showSymbol ? "currency" : undefined,
      currency: props.showSymbol ? "USD" : undefined,
      maximumFractionDigits: props.showDecimals ? 2 : 0,
    });
    
    return {price}
};

Price.propTypes = {
  className: React.PropTypes.string,
  children: React.PropTypes.number,
  showDecimals: React.PropTypes.bool,
  showSymbol: React.PropTypes.bool,
};

Price.defaultProps = {
  children: 0,
  showDecimals: true,
  showSymbol: true,
};

const Page = () => {
  const lambPrice = 1234.567;
  const jetPrice = 999999.99;
  const bootPrice = 34.567;
  
  return (
    

      
One lamb is {lambPrice}
      
One jet is {jetPrice}
      
Those gumboots will set ya back {bootPrice} bucks.
    
  );
};

正如你可以看到，我使用強大的Intl字符串格式化庫，這里有一個鏈接到他們的網站。

我應該指出（在一些朋克之前），這不是一行代碼的保存。你可以很容易地使用函數來做到這一點。 （當然，組件只是具有不同形狀括號的函數。）

這是更少的代碼，但對我的眼睛，不太好：

function numberToPrice(num, options = {}) {
    const showSymbol = options.showSymbol !== false;
    const showDecimals = options.showDecimals !== false;
    
    return num.toLocaleString("en", {
      style: showSymbol ? "currency" : undefined,
      currency: showSymbol ? "USD" : undefined,
      maximumFractionDigits: showDecimals ? 2 : 0,
    });
}

const Page = () => {
  const lambPrice = 1234.567;
  const jetPrice = 999999.99;
  const bootPrice = 34.567;
  
  return (
    

      
One lamb is {numberToPrice(lambPrice)}
      
One jet is {numberToPrice(jetPrice, { showDecimals: false })}
      
Those gumboots will set ya back {numberToPrice(bootPrice, { showDecimals: false, showSymbol: false })} bucks.
    
  );
};

請注意，我不會檢查我在上述任何一個有效的數字。那是因為 …

9. The store is the component’s servant

我可能寫了這么幾千次：

if (props.user.signInStatus === SIGN_IN_STATUSES.SIGNED_IN)..

（我被告知，我夸張，像，一個gazillion時代。）

最近我決定，如果我做這樣的檢查，我做錯了。我想只問“是用戶登錄？”，而不是“用戶的登錄狀態等于登錄？”

的組件在他們的生命周期中所做的已經足夠， 他們不應該去擔心他們的父組件會傳一些什么參數。 比如說Price不用管傳入的數據是否是數字。

你會看到，如果你的store中的數據被設計為與您的組件匹配，您的組件將更加簡單。我之前說過，復雜性是bug隱藏的地方。組件中的復雜性越低，bug出現的幾率越低。

但是復雜這個問題肯定存在。

我的建議是：

制定你的組件的一般結構和他們需要的數據

設計您的store以支持這些要求

做任何你需要做的輸入數據，使其適合store。

對于這最后一點，我建議一個單一的模塊，所有的按傳入的信息重命名props，將字符串轉換為數字，將對象轉換為數組，將日期字符串轉換為日期對象。

如果你正在進行一個react/redux， 你可以在一個動作創建者中獲取搜索結果：

fetch(`/api/search?${queryParams}`)
.then(response => response.json())
.then(normalizeSearchResultsApiData) // the do-it-all data massager
.then(normalData => {
    // dispatch normalData to the store here
});

你的組件將會感謝你的。

10. Importing components without relative paths

不這樣做的話后患無窮啊！

import Button from "../../../../Button/Button.jsx";
import Icon from "../../../../Icon/Icon.jsx";
import Footer from "../../Footer/Footer.jsx";

或者你可以這樣做

import {Button, Icon, Footer} from "Components";

理論上你可以：

在導出每個組件的地方創建單個index.js

使用Webpack的resolve.alias將組件重定向到該索引文件

但是當我寫的代碼我來認識到這是一個壞主意，有三個原因：當我寫代碼的時候， 我才認識到上面的模式并不好，原因有三個。

在Webpack2 似乎改變了原有的API。

eslint將會檢測到錯誤， 由于找不到你引用的組件(因為resolve.alias)。

如果你使用一個好的IDE，它會知道你的組件在哪里。你會得到關于不提供所需props的提示， 也無法通過Command+click 打開文件這個功能。如果你這樣做，你的IDE將不再知道在哪里找到該組件，你會失去這些給力的功能。

Wrap up

這就是全部， 我非常確定我將在今年看到這些模式的應用。 或許你們今天就會使用它。 你也可以分享一些你覺得不錯的模式。

喔， 我決定我不關心你是否點擊了綠色的心。

I WILL NOT BE DEFINED BY AN INTERNET METRIC.