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 >
)

组件对象

组件对象用于定义宏成分将作为儿童接受的组件。

元素功能

元素函数类似于一个反应组件，但接收元素对象作为其第一个参数，并将其作为第二个参数。元素对象是由孩子创建的，旨在使封装的组成和元素结构更加容易。

在宏组件中，元素函数与元素对象和props： 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 >