如何用情感製作列表組成部分

本週在Sentry 進行代碼重構時，我發現我們缺少一個可在項目和功能之間通用的通用列表組件。因此，我開始著手創建一個，但問題在於：我們在Sentry 中使用Emotion 進行樣式設置，而我對Emotion 只有初步的了解，其文檔中對其描述為……

……一個用於使用JavaScript 編寫CSS 樣式的庫。除了提供強大的、可預測的樣式組合之外，它還提供出色的開發人員體驗，其功能包括源映射、標籤和測試實用程序。同時支持字符串和對像樣式。

如果您從未聽說過Emotion，其基本思想如下：當我們在具有許多組件的大型代碼庫上工作時，我們希望確保可以控制CSS 的層疊樣式表。因此，假設您在一個文件中有一個.active類，並且您希望確保它不會影響另一個文件中也具有.active類的完全獨立組件的樣式。

Emotion 通過向您的類名添加自定義字符串來解決此問題，這樣它們就不會與其他組件衝突。以下是它可能輸出的HTML 示例：

<div></div>

很簡潔，對吧？但是，還有許多其他工具和工作流程可以實現非常類似的功能，例如CSS Modules。

要開始創建組件，我們首先需要將Emotion 安裝到我們的項目中。我不會詳細介紹這些內容，因為這取決於您的環境和設置。但是，一旦完成，我們就可以像這樣創建一個新組件：

 import React from 'react';
import styled from '@emotion/styled';

export const List = styled('ul')`
  list-style: none;
  padding: 0;
`;

這對我來說看起來很奇怪，因為我們不僅正在為<ul></ul>元素編寫樣式，而且還定義了組件也應該呈現一個<ul></ul>元素。在一個地方同時組合標記和样式感覺很奇怪，但我確實喜歡它的簡單性。它只是有點擾亂了我的思維模型以及HTML、CSS 和JavaScript 之間的關注點分離。在另一個組件中，我們可以導入這個<list></list>並像這樣使用它：

 import List from 'components/list';

<list>這是一個列表項。</list>

然後，我們添加到列表組件中的樣式將轉換為類名（例如.oefioaueg ），然後添加到我們在組件中定義的<ul></ul>元素中。但我們還沒有完成！對於列表設計，我需要能夠使用相同的組件呈現<ul></ul>和<ol&gt;</ol&gt;。我還需要一個允許我在每個列表項中放置圖標的版本。就像這樣：Emotion 的酷（而且有點奇怪）之處在於，我們可以使用as屬性來選擇導入組件時要呈現的HTML 元素。我們可以使用此屬性來創建我們的<ol&gt;</ol&gt;變體，而無需創建自定義類型屬性或其他內容。而這看起來就像這樣：

<list>這將呈現一個ul。</list>
<list as="ol&quot;>這將呈現一個ol。</list>

這不僅對我來說很奇怪，對吧？但是，這非常巧妙，因為這意味著我們不必在組件本身中進行任何奇怪的邏輯來更改標記。

這時，我開始記下這個組件的理想API 可能是什麼樣子，因為然後我們可以從那裡倒退回來。這就是我的設想：

<list>
  <listitem>項目1</listitem>
  <listitem>項目2</listitem>
  <listitem>項目3</listitem>
</list>
<list>
  <listitem color="orange400" icon="{<IconBusiness" size="sm"></listitem> }>項目1
  <listitem color="orange400" icon="{<IconBusiness" size="sm"></listitem> }>項目2
  <listitem color="orange400" icon="{<IconBusiness" size="sm"></listitem> }>項目3
</list>
<list as="ol&quot;>
  <listitem>項目1</listitem>
  <listitem>項目2</listitem>
  <listitem>項目3</listitem>
</list>

因此，在製作此草圖後，我知道我們需要兩個組件，以及能夠在<listitem></listitem>中嵌套圖標子組件的能力。我們可以像這樣開始：

 import React from 'react';
import styled from '@emotion/styled';

export const List = styled('ul')`
  list-style: none;
  padding: 0;
  margin-bottom: 20px;

  ol& {
    counter-reset: numberedList;
  }
`;

這種特殊的ol&語法是我們告訴Emotion 這些樣式僅在元素呈現為<ol&gt;</ol&gt;時才適用的方式。通常最好在此元素中添加background: red;以確保您的組件正確呈現內容。接下來是我們的子組件<listitem></listitem>。需要注意的是，在Sentry 中我們也使用TypeScript，因此在定義我們的<listitem></listitem>組件之前，我們需要先設置我們的props：

 type ListItemProps = {
  icon?: React.ReactNode;
  children?: string | React.ReactNode;
  className?: string;
};

現在我們可以添加我們的<iconwrapper></iconwrapper>組件，它將在<listitem></listitem>中調整<icon></icon>組件的大小。如果您還記得上面的示例，我希望它看起來像這樣：

<list>
  <listitem color="orange400" icon="{<IconBusiness" size="sm"></listitem> }>項目1
  <listitem color="orange400" icon="{<IconBusiness" size="sm"></listitem> }>項目2
  <listitem color="orange400" icon="{<IconBusiness" size="sm"></listitem> }>項目3
</list>

IconBusiness組件是一個預先存在的組件，我們希望將其包裝在<span></span>中，以便我們可以對其進行樣式設置。值得慶幸的是，我們只需要一點CSS 就可以將圖標與文本正確對齊，而<iconwrapper></iconwrapper>可以為我們處理所有這些：

 type ListItemProps = {
  icon?: React.ReactNode;
  children?: string | React.ReactNode;
  className?: string;
};

const IconWrapper = styled('span')`
  display: flex;
  margin-right: 15px;
  height: 16px;
  align-items: center;
`;

完成此操作後，我們終於可以在這兩個組件下方添加我們的<listitem></listitem>組件，儘管它要復雜得多。我們需要添加props，然後當存在icon prop 時，我們可以渲染上面的<iconwrapper></iconwrapper>，並渲染傳入其中的icon組件。我還添加了下面的所有樣式，以便您可以看到我如何為這些變體中的每一個設置樣式：

 export const ListItem = styled(({ icon, className, children }: ListItemProps) => (
  

{icon && ( {icon} )} {children}

))` display: flex; align-items: center; position: relative; padding-left: 34px; margin-bottom: 20px; /* Tiny circle and icon positioning */ &:before, > ${IconWrapper} { position: absolute; left: 0; } ul & { color: #aaa; /* This pseudo is the tiny circle for ul items */ &:before { content: ''; width: 6px; height: 6px; border-radius: 50%; margin-right: 15px; border: 1px solid #aaa; background-color: transparent; left: 5px; top: 10px; } /* Icon styles */ ${p => p.icon && ` span { top: 4px; } /* Removes tiny circle pseudo if icon is present */ &:before { content: none; } `} } /* When the list is rendered as an

*/ ol & { &:before { counter-increment: numberedList; content: counter(numberedList); top: 3px; display: flex; align-items: center; justify-content: center; text-align: center; width: 18px; height: 18px; font-size: 10px; font-weight: 600; border: 1px solid #aaa; border-radius: 50%; background-color: transparent; margin-right: 20px; } } `;

就是這樣！一個使用Emotion 構建的相對簡單的<list></list>組件。但是，在完成此練習後，我仍然不確定是否喜歡這種語法。我認為它讓簡單的事情變得非常簡單，但中等大小的組件比應該的要複雜得多。此外，對於新手來說，它可能會非常令人困惑，這讓我有點擔心。

但我想一切都是學習經驗。無論如何，我很高興有機會處理這個小型組件，因為它教會了我一些關於TypeScript、React 以及如何使我們的樣式在某種程度上可讀的知識。

以上是如何用情感製作列表組成部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！