Các thành phần được tạo kiểu, các hệ thống được tạo kiểu và cách chúng hoạt động

[ad_1]

 Các thành phần được tạo kiểu, các hệ thống được tạo kiểu và cách chúng hoạt động

Đôi khi các thư viện mà chúng ta sử dụng hàng ngày có vẻ hơi giống ma thuật. Bằng cách dành thời gian để hiểu các tính năng JavaScript cơ bản giúp các thư viện này trở nên khả thi, chúng tôi trở nên trang bị tốt hơn để cải thiện việc sử dụng các thư viện đó, áp dụng chức năng của chúng theo những cách độc đáo và có liên quan. phối hợp với nhau để tạo ra các thành phần trình bày rất đơn giản: các thành phần theo kiểu hệ thống theo kiểu .

Đây là một ví dụ về các thư viện này hoạt động cùng nhau, lịch sự của tài liệu hệ thống theo kiểu.

   nhập  theo kiểu  từ   'thành phần theo kiểu' 
 nhập   { màu }   từ   'hệ thống theo kiểu' 

 const  Hộp  =  được tạo kiểu .  div   `
   $ { màu }   
` 
 

Mã này đã tạo ra một thành phần React có tên Box nhận được các đạo cụ màu bg . < Màu hộp = "# fff" bg = "cà chua"
Cà chua
< / Hộp >

Trong bài viết này tôi sẽ trình bày:

  • Các thành phần phản ứng với các mẫu được gắn thẻ
  • Thực hiện một phiên bản đơn giản của các thành phần được tạo kiểu
  • Đi sâu vào cách thức các thành phần được tạo kiểu thực sự hoạt động cùng nhau

Văn học mẫu

Để hiểu cách thức các thành phần được tạo kiểu các hệ thống theo kiểu hoạt động, trước tiên bạn nên hiểu các thư viện này ở đâu có được sức mạnh của họ từ: Văn học mẫu.

Trường hợp sử dụng phổ biến nhất của Văn học mẫu là nối chuỗi.

 
 const  chuỗi  =    `Tôi là một mẫu chữ`   ; 


 const  biểu thức  =   'giá trị động'  ; 
 const  chuỗi  =    `Tôi có thể chứa    $ { biểu thức }    `  ;   

Văn bản mẫu sạch, chúng có hiệu quả và chúng đã được chấp nhận rất tốt cho việc nối chuỗi mà một số người trong chúng ta ( ví dụ như tôi) thậm chí không quan tâm đến cách cú pháp này hoạt động, hoặc nhận ra rằng chức năng của nó có thể được mở rộng dựa trên.

Văn bản mẫu và chức năng trước đó

Khi chúng tôi triển khai Văn bản mẫu : Nội dung của Mẫu chữ (ví dụ: văn bản và trình giữ chỗ) được truyền cho một chức năng.

Chức năng nào? Trong hai ví dụ ở trên, một hàm mặc định với công việc ghép văn bản và giữ chỗ thành một chuỗi.

   const  biểu thức    'giá trị động'  ; 
 const  ví dụ  =    `Tôi có thể chứa    $ { biểu thức }    `  ; 

console .   log   ( ví dụ )  ;   

không giới hạn để chỉ thực hiện nối chuỗi. JavaScript cho phép chúng tôi sử dụng các chức năng tùy chỉnh của riêng mình để làm bất cứ điều gì chúng tôi muốn với văn bản và trình giữ chỗ trong Mẫu chữ. Loại chức năng này được gọi là Thẻ và để sử dụng nó, bạn chỉ cần tham chiếu tên hàm – Thẻ – phía trước Mẫu chữ. Thực hiện điều này dẫn đến việc tạo Mẫu được gắn thẻ.

Ví dụ, đây là một chức năng đơn giản không chấp nhận bất kỳ tham số nào và in một thông điệp tĩnh tới bảng điều khiển.

   const   printStaticMessage   =   ( )   =>  
console .   log   (  'Thông điệp tĩnh của tôi'  )  ;
}   

Chúng ta có thể gọi hàm này theo hai cách: Như một lệnh gọi hàm truyền thống và như một Mẫu được gắn thẻ.

   printStaticMess   ( )  ; 
printStaticMessage   ``   ;   

Lưu ý rằng mỗi lần gọi đều tạo ra kết quả giống nhau. Vì vậy, chúng ta có thể kết luận rằng Mẫu được gắn thẻ chỉ là một cách khác để gọi hàm.

Sử dụng Mẫu bằng chữ làm đối số cho thẻ

Mẫu được gắn thẻ hữu ích hơn sẽ sử dụng văn bản và trình giữ chỗ trong mẫu chữ. Hãy để Lát tạo một Thẻ in ra các đối số của nó.

  const printArgument = (... args) => {console.log (... args); }

const var1 = "của tôi";
const var2 = "tin nhắn"

printArgument` Đây là $ {var1} tùy chỉnh $ {var2}! `;

// ["This is "," custom ","!"],
// "của tôi",
// "message"  

Đối số đầu tiên là một chuỗi các chuỗi đại diện cho văn bản trong Mẫu chữ, được phân tách thành các thành phần dựa trên vị trí của trình giữ chỗ.

Phần còn lại n đối số là các chuỗi có giá trị của từng trình giữ chỗ, được sắp xếp dựa trên thời điểm chúng được định nghĩa trong Mẫu văn bản.

Biết rằng đây là những đối số mà Thẻ nhận được, chúng ta có thể đoán được triển khai hàm mặc định Chức năng ghép nối văn bản trông giống như:

   const   defaultFunction   =    ] stringArray   ...  giá trị  )   =>   {
   return  stringArray .   giảm   (  (  acc  ] i  )   =>   {
      trả lại  giá trị  [ i ]  ?  acc  +  str  +  [ i ]  :  acc  +  str ; 
  }    ''  )  ; 
} 

 const  var1  =   "của tôi"  ; 
 const  var2  =   "tin nhắn" 

 const  ví dụ  =  defaultFactor   `Đây là    $ { var1 }   tùy chỉnh    $ { var2 }   ! `  ;

giao diện điều khiển .   log   ( ví dụ )  ;   

[194545934] Mẫu được gắn thẻ

Vì Thẻ chỉ đơn giản là nhận mẫu giữ chỗ theo nghĩa đen của mẫu làm biến đối số, các biến đó có thể chứa bất kỳ đối tượng JavaScript nào, như số, chuỗi hoặc hàm. Dưới đây là một ví dụ không hữu ích khi chúng ta chuyển một hàm trong trình giữ chỗ theo nghĩa đen của mẫu và thực thi nó trong Thẻ.

  const execFirstPlaceholder = (textArray, giữ chỗ) => {
giữ chỗ ();
}

execFirstPlaceholder` $ {() => {console.log ('giữ chỗ đầu tiên')}} `;

// >>> trình giữ chỗ đầu tiên  

Trả lại các hàm từ Mẫu được gắn thẻ

Giống như bất kỳ chức năng nào khác trong JavaScript, Mẫu được gắn thẻ có thể trả về các đối tượng, chuỗi, số và tất nhiên , các hàm.

  const bội = (bội) => (num) =>
parseInt (num [0]) * parseInt (bội [0]);
    
const double = bội số `2`;
kết quả const = double`4`;

console.log (kết quả); // >>> 8  

Thực hiện bước nhảy vọt để phản ứng

Phản ứng các thành phần chức năng của trò chơi Tấn là các hàm JavaScript rất đơn giản có thể được hiển thị trong DOM. Dưới đây là một ví dụ về Mẫu được gắn thẻ trả về thành phần chức năng React.

  const withGreet = ([greeting]) =>
({name}) => 

{chúc mừng}, {name}!

; const Greet = withGreet`Greetings`; // Kết xuất thành phần // Hiển thị trong DOM

Chúc mừng, Chris

Đây là mấu chốt cho cách các Thành phần được tạo kiểu tạo ra các thành phần React.

Các thành phần được tạo kiểu

nghĩa đen (một bổ sung gần đây cho JavaScript) và sức mạnh của CSS, các thành phần theo kiểu cho phép bạn viết mã CSS thực tế để định kiểu các thành phần của bạn. Nó cũng loại bỏ ánh xạ giữa các thành phần và kiểu – sử dụng các thành phần làm cấu trúc kiểu cấp thấp không thể dễ dàng hơn!

https://www.styled-components.com

Các thành phần được tạo kiểu sử dụng các mẫu được gắn thẻ để trả về các thành phần React.

Trong ví dụ sau, styled.h1 được sử dụng để tạo ra một thành phần React đơn giản có chứa

HTML thẻ, hiển thị bằng cách sử dụng các kiểu CSS được chỉ định trong Mẫu chữ

  nhập theo kiểu từ 'thành phần theo kiểu';

const Title = styled.h1`color: màu xanh; `;

// Kết xuất
 Tiêu đề thường xuyên 

// Hiển thị cho DOM

Tiêu đề thông thường

Đối tượng được tạo kiểu chứa các khóa được đặt tên theo các thẻ HTML phổ biến – như H1, H2 và div. Các khóa này tham chiếu một chức năng có thể được sử dụng làm Thẻ trong Mẫu được gắn thẻ.

Việc thực hiện đơn giản styled.h1

Hãy thử thực hiện đơn giản theo kiểu.h1 . Đơn giản nhất, hàm styled.h1 nhận các kiểu CSS trong dấu kiểm ngược và biến chúng thành một đối tượng kiểu mà nó gắn vào phần tử bên dưới (ví dụ h1 ).

  const styledH1 = ([styles]) => ({children}) => {
  const dòng = phong cách
                  .split (';')
                  .map (dòng => line.trim ())
                  .filter (dòng => dòng! == "")

  // Chức năng lịch sự của mck89 trên StackOverflow
  const convertToCamelCase = (key) =>
    key.replace (/ - ([a-z]) / g, (x, lên) => up.toUpperCase ())

  const style = lines.reduce ((acc, line) => {
    const lineParsed = line.split (':');
    const key = convertToCamelCase (lineParsed [0]);
    const val = lineParsed [1];
    trả về {... acc, [key]: val};
  }, {});

  trở lại 

{trẻ em}

} const H1 = theo kiểuH1`   màu đỏ;   cỡ chữ: 18px; `; // Kết xuất

Xin chào

// Hiển thị trong DOM

Xin chào

Tại thời điểm này, phong cách chúng ta đang chuyển sang chức năng được mã hóa cứng và cố định; không thể thay đổi linh hoạt, dựa trên các giá trị prop mà thành phần nhận được.

Hãy xem cách khả năng chuyển các chức năng vào các mẫu được gắn thẻ của chúng tôi có thể cho phép mọi thứ trở nên năng động hơn.

để truy cập Đạo cụ trong Văn bản mẫu và Thành phần được tạo kiểu

Như đã thảo luận, chúng tôi đã thảo luận một chức năng được chuyển đến một trình giữ chỗ theo nghĩa đen của Mẫu. Các thành phần được tạo kiểu sử dụng tính năng này để tạo các kiểu động.

  nhập theo kiểu từ 'các thành phần được tạo kiểu';

nút const = styled.button`
  màu: $ {(đạo cụ) => props.primary? 'xanh đỏ' };
`;

class StyledComponentsDemo mở rộng Thành phần {
  kết xuất () {
    trở về(
      <>
      
      

     
    )
  }
}  

Khi Thành phần được tạo kiểu được hiển thị, mỗi chức năng trong Mẫu chữ được truyền qua các đạo cụ của thành phần và các đạo cụ đó có thể được sử dụng để tác động đến việc trình bày thành phần.

Lưu ý: không phải tất cả các đạo cụ được truyền cho Thành phần được tạo kiểu đều cần tác động đến bản trình bày (ví dụ: onSubmit); chúng cũng chỉ có thể được sử dụng bởi phần tử HTML nằm bên dưới. Đầu tiên, thành phần tùy chỉnh phải nhận được prop className và chuyển nó đến thành phần DOM bên dưới. Khi đã xong, chuyển thành phần tùy chỉnh cho chức năng được tạo kiểu và gọi nó dưới dạng Mẫu được gắn thẻ để nhận Thành phần được tạo kiểu mới.

  nhập theo kiểu từ 'thành phần được tạo kiểu' ;

const Nút = ({className, trẻ em}) =>
  

const NútBlue = theo kiểu (Nút) `color: blue`;

// Kết xuất
 Nút màu xanh   

Tạo kiểu cho các thành phần được tạo kiểu

Các thành phần được tạo kiểu sử dụng bút stylus tiền xử lý CSS, hỗ trợ cú pháp giống SCSS để tự động lồng kiểu.

] const Thing = styled.button`
  màu đen;
    
  :bay lượn {
    màu: xanh;
  }
`

Trong cú pháp SCSS, & tham chiếu thành phần hiện tại. Bạn cũng có thể tham chiếu các thành phần khác như bạn sẽ tham chiếu bất kỳ loại bộ chọn nào khác (ví dụ: . Class hoặc #id ) bằng cách tham khảo đơn giản $ {OtherComponentName} nhưng chỉ khi đó là Thành phần được tạo kiểu.

  nhập theo kiểu từ 'thành phần theo kiểu';

const Item = styled.div`
màu đỏ;
`
const Container = styled.div`
&> $ {Mục} {
cỡ chữ: 2rem;
}
`
class StyledComponentsDemo mở rộng Thành phần {
  kết xuất () {
    trở về(
      
         Mục 1 
      
    )
  }
}  

Như bạn có thể thấy, chúng tôi có khả năng không chỉ chỉ định kiểu trong các thành phần của mình, mà còn có khả năng thêm một số chức năng động. Dựa trên điều này, chúng tôi có thể điều chỉnh tốt hơn một số trường hợp sử dụng phổ biến như thêm chủ đề vào các ứng dụng của chúng tôi.

Sử dụng Chủ đề

Việc thực hiện chủ đề bằng cách xuất thành phần ThemeProvider , chuyển một đối tượng đến chủ đề và bao bọc toàn bộ ứng dụng trong thành phần ThemeProvider . Điều này sẽ cung cấp cho mọi quyền truy cập Thành phần được tạo kiểu vào đối tượng .

  nhập theo kiểu, {ThemeProvider} từ 'thành phần theo kiểu';

const Item = styled.div`
màu: $ {(đạo cụ) => props.theme.color.primary}
`

chủ đề const = {
  màu sắc: {
    chính: 'đỏ'
  }
}

class StyledComponentsDemo mở rộng Thành phần {
  kết xuất () {
    trở về(
      
 Mục 1 
      
    )
  }
}  

Các thành phần không phải S Các thành phần được đánh máy cũng có thể truy cập chủ đề bằng cách sử dụng chức năng withTheme .

 withTheme} từ 'thành phần theo kiểu';

lớp MyComponent mở rộng React.Component {
  kết xuất () {
    return 

{this.props.theme.color.primary}

  } } xuất mặc định vớiTheme (MyComponent);

Hệ thống được tạo kiểu

Hệ thống theo kiểu là một tập hợp các chức năng tiện ích có thêm đạo cụ kiểu cho các thành phần React của bạn và cho phép bạn điều khiển các kiểu trên một đối tượng chủ đề toàn cầu với tỷ lệ chính tả, màu sắc và thuộc tính bố cục.

https://styled-system.com

Nếu bạn đã tạo Nút thành phần từ Các thành phần được tạo kiểu và bạn muốn nó nhận được các đạo cụ màu nền trước và sau, bạn có thể sử dụng chức năng tiện ích theo kiểu hệ thống màu và chuyển nó dưới dạng chức năng giữ chỗ trong Mẫu chữ cho phép các đạo cụ này.

  nhập kiểu, {ThemeProvider} từ 'thành phần theo kiểu';
nhập {color} từ 'hệ thống theo kiểu'

chủ đề const = {
  màu sắc: {
    chính: 'màu xanh'
  }
}

const Box = styled.div`
  $ {màu}
`

class StyledSystemDemo mở rộng Thành phần {
  kết xuất () {
    trở về (
      
        <>
           Cà chua 
           Cà chua 
        
      
    )
  }
}  

Lưu ý: Tên của các đạo cụ được tạo đều được nêu trong API hệ thống được tạo kiểu.

Nếu có một chủ đề khả dụng, chức năng tiện ích sẽ cố gắng khớp với giá trị prop vào chủ đề trước khi sử dụng giá trị làm giá trị thô (ví dụ: #fff ).

Cấu trúc các đối tượng chủ đề

Cấu trúc của đối tượng chủ đề và hệ thống được liên kết chặt chẽ. Cấu trúc tuân theo một đặc tả kỹ thuật đang tiến hành có tên là Đặc tả chủ đề giao diện người dùng hệ thống.

mảng hoặc đối tượng) cũng tuân theo thông số kỹ thuật này.

  export const theme = {
fontSizes: [
	  12, 14, 16, 20, 24, 32
	]
fontSizes.body = fontSizes [1]
màu sắc: {
màu xanh da trời: '# 07c',
màu xanh lá cây: '# 0fa',
}
}  

Với chủ đề trên, phông chữ fontSize dựa trên một thành phần có thể nhận giá trị chỉ số của mảng hoặc bí danh cơ thể .

Dưới vỏ bọc của màu

Chúng ta hãy xem cách hệ thống kiểu dáng thực hiện chức năng tiện ích màu . Hãy nhớ rằng một chức năng tiện ích được gọi như thế này:

  const Nút = styled.div`
$ {màu}
` 

Đây là chức năng của nó.

  // https://github.com/styled-system/styled-system/blob/v2.3.6 /src/styles.js

xuất const màu = đạo cụ => ({
  ... textColor (đạo cụ),
  ... bgColor (đạo cụ)
})  

Điều này gần giống với cách viết này trong Bản mẫu:

  const Button = styled.div`
$ {(đạo cụ) => ({
... textColor (đạo cụ),
... bgColor (đạo cụ)
})}
` 

Các văn bản textColor bgColor sẽ trả về các đối tượng kiểu được lan truyền trong hàm. Các hàm này trông giống như thế này.

  // https://github.com/styled-system/styled-system/blob/v2.3.6/src/styles.js

xuất const textColor = responsiveStyle ({
  chống đỡ: 'màu',
  khóa: 'màu sắc', // khóa chủ đề
})

xuất const bgColor = responsiveStyle ({
  chống đỡ: 'bg',
  cssProperty: 'nềnColor',
  phím: 'màu sắc'
})  

Hàm responsiveStyle xử lý tất cả các điểm dừng, dự phòng và đặt tên prop. Dưới đây, tôi đã đơn giản hóa mã hệ thống theo kiểu cho mục đích trình diễn.

  // https://github.com/styled-system/styled-system/blob/v2.3.6/src/util. js
// Tôi đã đơn giản hóa điều này cho mục đích trình diễn

xuất const responsiveStyle = ({
  chống đỡ
  cssProperty,
  Chìa khóa,
}) => {
  const fn = đạo cụ => {
    cssProperty = cssProperty | | chống đỡ
    const n = đạo cụ [prop];
    const theme = props.theme;

    // ...

    trở về {
      [cssProperty]: chủ đề [key] [n]
    }

    // ...

  }

  trở lại fn
}  

Có thể được biểu thị để trông giống như thế này:

  const Nút = styled.div`
  {
    $ {... (đạo cụ) => (
      {màu: props.theme ['colors'] [props.color]}
    )}
$ {... (đạo cụ) => (
      {nềnColor: props.theme ['colors'] [props.bg]}
    )}
  }
` 

Điểm dừng và chủ đề phản hồi

Đối với các chủ đề đáp ứng, hệ thống theo kiểu cho phép bạn thiết lập điểm dừng trong chủ đề vượt qua một mảng như một chỗ dựa với các giá trị khác nhau cho mỗi điểm dừng. hệ thống theo kiểu sử dụng cách tiếp cận đầu tiên trên thiết bị di động, do đó, chỉ số đầu tiên sẽ luôn là điểm dừng nhỏ nhất.

  

// theme.js
const breakpoint = ['40em', '52em', '64em', '80em']

xuất mặc định {breakpoint};  

Kết luận

Tôi được truyền cảm hứng để xem các nhà phát triển của các thành phần theo kiểu đã sử dụng chức năng mở rộng của Văn bản mẫu và Mẫu được gắn thẻ để cung cấp cho người dùng cách trực quan để thêm SCSS vào các thành phần React.

Gần đây bạn có thấy sử dụng chức năng phổ biến nào trong công việc của mình không? Xin chia sẻ!

Nguồn

Hệ thống được tạo kiểu

Các thành phần được tạo kiểu

Phép thuật đằng sau các thành phần được tạo kiểu

Văn học

[ad_2]
Source link: webdesignernews

Leave a Reply

Your email address will not be published. Required fields are marked *