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

특징

단일 구성 요소 제작자
Styled Components & Glamorous와 같은 라이브러리와 함께 사용하기위한 것입니다
종합 가능한 구성 요소에서 레이아웃 구조를 캡슐화하십시오
구성 요소 API 표면적을 최소로 유지하십시오.
다른 반응 구성 요소와 함께 작동합니다

참고 : 매크로 구성 요소는 특정 아동 구성 요소 와만 작동하기위한 것입니다. 슬롯을 정의하려면 아래의 대안 섹션을 참조하십시오.

동기 부여

종종 React Composition 및 props.children 사용하여 여러 요소로 구성된 UI를 만드는 것이 가장 좋습니다. 그러나 때로는 레이아웃을 위해 캡슐화 된 트리 구조로 더 큰 복합 구성 요소를 만들거나 패널, 카드 또는 알림과 같은 부트 스트랩과 같은 UI 구성 요소를 만들 수 있습니다. 이 라이브러리를 사용하면 임의의 소품 API를 정의 할 필요없이 캡슐화 된 DOM 구조로 복합 구성 요소를 만들 수 있으며 다른 반응 조성물과 마찬가지로 작동합니다.

이를 통해 구성 요소 API 표면적이 작고 유지하기가 더 쉬워 질 수 있습니다.

React에서 사고에 설명 된대로 데이터 구조에 매핑되지 않는 복합 반응 구성 요소를 작성하는 경우이 모듈은 귀하를 대상으로합니다.

용법

Macro(componentsObject)(elementFunction)

트리 레이아웃 구조를 유지하는 Composable API로 React 구성 요소를 반환합니다.

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

elementFunction 인수는 매크로 함수로 전달 된 componentsObject 기반으로 요소의 객체로 호출됩니다. 위의 배너 구성 요소를 사용하면 다음과 같은 것이 보입니다.

 import Banner from './Banner'

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

구성 요소

구성 요소 객체는 매크로 구성 요소가 어린이로 받아들이는 구성 요소를 정의하는 데 사용됩니다.

요소 기능

요소 함수는 React 구성 요소와 유사하지만 요소 객체를 첫 번째 인수로 수신하고 두 번째 인수로 소품을받습니다. 요소 객체는 어린이로부터 생성되며 캡슐화 구성 및 요소 구조를보다 쉽게 만들기위한 것입니다.

매크로 구성 요소 내에서 요소 함수는 요소 객체 및 소품으로 호출됩니다 : 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 렌더링되며 React는 해당 요소를 렌더링하지 않습니다. 이것은 선택적인 어린이를 조건부 생략하는 데 유용합니다

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

소품이 루트 구성 요소로 전달되었습니다

요소 함수로 전달 된 두 번째 인수를 사용하면 소품을 루트 요소 또는 구성 요소 내의 다른 요소로 전달할 수 있습니다.

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

구성 요소를 여러 번 사용합니다

동일한 구성 요소를 두 번 사용하려면 ComponentsObject에서 고유 한 키를 제공하십시오.

 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 >