macro components下載 - macro components源代碼下載

宏觀組件

創建靈活的佈局和復合UI組件，而無需定義任意的自定義道具。

 npm i macro-components

 import React from 'react'
import styled from 'styled-components'
import Macro from 'macro-components'
import { space , fontSize , color } from 'styled-system'

// Define some styled-components
const Box = styled . div ` ${ space } ${ fontSize } ${ color } `
Box . displayName = 'Box'

const Image = styled . img `
  max-width: 100%;
  height: auto;
  ${ space }
`
Image . displayName = 'Image'

const Heading = styled . h2 ` ${ space } ${ fontSize } ${ color } `
Heading . displayName = 'Heading'

const Text = styled . div ` ${ space } ${ fontSize } ${ color } `
Text . displayName = 'Text'

// create a macro function with the UI components you intend to use
const macro = Macro ( {
  Image ,
  Heading ,
  Text
} )

// Create a macro-component
const MediaObject = macro ( ( {
  Image ,
  Heading ,
  Text
} ) => (
  < Flex p = { 2 } align = 'center' >
    < Box width = { 128 } >
      { Image }
    </ Box >
    < Box >
      { Heading }
      { Text }
    </ Box >
  </ Flex >
) )

 import MediaObject from './MediaObject'

// get the macro component's child components
const { Image , Heading , Text } = MediaObject

// Use the macro-component by passing the components as children
const App = props => (
  < div >
    < MediaObject >
      < Image src = 'kitten.png' />
      < Heading >
        Hello
      </ Heading >
      < Text >
        This component keeps its tree structure but still allows for regular composition.
      </ Text >
    </ MediaObject >
  </ div >
)

特徵

單個組件創建者
旨在與樣式組件和迷人的圖書館一起使用
將佈局結構封裝在可組合組件中
幫助將組件API表面積保持在最低
與其他任何反應組件一起使用

注意：宏組件僅用於與特定的兒童組件一起工作。如果您想定義插槽，請參見下面的替代部分。

動機

通常，最好使用React構圖和props.children創建由多個元素組成的UI，但有時您可能需要創建帶有佈局的封裝的樹結構或創建Bootstrap類似於Bootstrap的UI組件（例如面板，卡片，卡片或警報）。該庫使您可以創建具有封裝的DOM結構的複合組件，而無需定義任意道具API，並且就像其他任何反應組合一樣起作用。

這可以幫助確保您的組件API表面積保持較小且易於維護。

如React中的思維中所述，如果您發現自己創建了不映射到數據結構的複合反應組件，則該模塊適用於您。

用法

Macro(componentsObject)(elementFunction)

返回具有可組合的API的React組件，該API保持樹佈局結構。

 const Banner = Macro ( {
  // pass a components object
  Heading ,
  Subhead
} ) ( ( {
  // the element function receives child elements
  // named according to the components object
  Heading ,
  Subhead
} ) => (
  < Box p = { 3 } color = 'white' bg = 'blue' >
    { Heading }
    { Subhead }
  </ Box >
)

基於傳遞給宏函數的componentsObject的元素對象調用elementFunction函數參數。使用上面的橫幅組件看起來像以下內容。

 import Banner from './Banner'

const App = ( ) => (
  < Banner >
    < Banner . Heading > Hello </ Banner . Heading >
    < Banner . Subhead > Subhead </ Banner . Subhead >
  </ Banner >
)

組件對象

組件對像用於定義宏成分將作為兒童接受的組件。

元素功能

元素函數類似於一個反應組件，但接收元素對像作為其第一個參數，並將其作為第二個參數。元素對像是由孩子創建的，旨在使封裝的組成和元素結構更加容易。

在宏組件中，元素函數與elementFunction(elementsObject, props)調用。

 // example
const elFunc = ( { Heading , Text , } , props ) => (
  < header >
    { Heading }
    { Text }
  </ header >
)

const Heading = styled . h2 ``
const Text = styled . div ``

const componentsObj = {
  Heading ,
  Text
}

const SectionHeader = Macro ( componentsObj ) ( elFunc )

省略孩子

對於任何未作為孩子傳遞到宏組件的元素，元素函數將呈現undefined ，並且反應不會呈現該元素。這對於有條件省略可選兒童很有用

 const macro = Macro ( { Icon , Text , CloseButton } )

const Message = macro ( {
  Icon ,
  Text ,
  CloseButton
} ) = > (
  < Flex p = { 2 } bg = 'lightYellow' >
    { Icon }
    { Text }
    < Box mx = 'auto' />
    { CloseButton }
  </ Flex >
)

 import Message from './Message'

const { Text , CloseButton } = Message

// Omitting the Icon child element will render Message without an icon.
const message = (
  < Message >
    < Text > { props . message } </ Text >
    < CloseButton
      onClick = { props . dismissMessage }
    />
  </ Message >
)

道具傳遞給根部分子

第二個參數傳遞給元素函數，您可以將Props傳遞給根部元素或組件中的任何其他元素。

 const macro = Macro ( { Image , Text } )

const Card = macro ( ( {
  Image ,
  Text
} , props ) => (
  < Box p = { 2 } bg = { props . bg } >
    { Image }
    { Text }
  </ Box >
) )

 // example usage
< Card bg = 'tomato' >
  < Card . Image src = 'kittens.png' />
  < Card . Text > Meow </ Card . Text >
</ Card >

克隆組件

要將默認道具應用於兒童傳遞的元素，請在元素函數中使用克隆組件。

 import Macro , { Clone } from 'macro-components'
import { Heading , Text } from './ui'

const macro = Macro ( { Heading , Text } )

const Header = macro ( ( { Heading , Text } ) => (
  < Box p = { 2 } >
    < Clone
      element = { Heading }
      fontSize = { 6 }
      mb = { 2 }
    />
    < Clone
      element = { Text }
      fontSize = { 3 }
    />
  </ Box >
) )

多次使用組件

要兩次使用相同的組件，請在組件對像中提供獨特的鍵。

 import React from 'react'
import Macro from 'macro-components'
import { Heading } from './ui'

const macro = Macro ( {
  Heading : Heading ,
  Subhead : Heading
} )

const Header = macro ( ( { Heading , Subhead } ) => (
  < Box p = { 2 } >
    { Heading }
    { Subhead }
  </ Box >
) )

 < Header >
  < Header . Heading > Hello </ Header . Heading >
  < Header . Subhead > Subhead </ Header . Subhead >
</ Header >

替代方案

為了創建與特定兒童組件不耦合的佈局組件，使用道具或有序的孩子可能是一種簡單的方法。

下面的解決方案使您可以通過任何任意組件作為道具或兒童。

請參閱此討論。

 // using custom props
const MyLayout = ( {
  left ,
  right
} ) => (
  < Flex >
    < Box width = { 128 } >
      { left }
    </ Box >
    < Box width = { 1 } >
      { right }
    </ Box >
  </ Flex >
)

< MyLayout
  left = { (
    < Image src = 'kitten.png' />
  ) }
  right = { (
    < Text > Meow </ Text >
  ) }
/ >

 // using ordered children
const Header = props => {
  const [ first , second ] = React . Children . toArray ( props . children )
  return (
    < Box p = { 3 } >
      { first }
      { second }
    </ Box >
  )
}

< Header >
  < Heading > First </ Heading >
  < Text > Second < / Text>
</ Header >

 // using a children object
const Header = ( {
  children : {
    left ,
    right
  }
} ) => (
  < Flex >
    < Box >
      { left }
    </ Box >
    < Box width = { 1 } >
      { right }
    </ Box >
  </ Flex >
)

< Header >
  { {
    left : (
      < Image src = 'kitten.png' />
    ) ,
    right : (
      < Text > Meow </ Text >
    )
  } }
</ Header >