将prop传递给样式化的组件

时间:2019-03-04 08:29:55

标签: css reactjs styled-components

我正在尝试寻找一种动态创建“将此div居中放置”组件的方法。这段代码目前可以使用,但是有点冗长而且不太干:

const Rel = styled.div`
    position: relative;
    height: 100%;
    width: 100%;
    `

const Abs = styled.div`
    position: absolute;
    top: 50%;
    `

const LeftAbs = styled(Abs)`
    left: 0;
    transform: translateY(-50%);
`
const RightAbs = styled(Abs)`
    right: 0;
    transform: translateY(-50%);
`
const CenterAbs = styled(Abs)`
    left: 50%;
    transform: translate(-50%, -50%);
`


const Centered = ({ children, ...props }) => {

    let abs = <CenterAbs>{children}</CenterAbs>

    if (props.center) {
        abs = <CenterAbs>{children}</CenterAbs>
    } else if (props.left) {
        abs = <LeftAbs>{children}</LeftAbs>
    } else {
        abs = <RightAbs>{children}</RightAbs>
    }

    return (
        <Rel>
          {abs}
        </Rel>
    )


}

我想通过将道具向下传递到Abs组件的方式以不同的方式执行此操作(如下图所示),其中顶级元素居中接收道具,然后将其动态传递到下面的组件中。 / p>

const Abs = styled.div`
    position: absolute;
    top: 50%;
    ${props => props.left ? "left: 0;" : "right: 0;"}
    `



const Centered = ({ children, ...props }) => {

    const { direction } = props

    return (
        <Rel>
          <Abs direction>{children}</Abs>
        </Rel>
    )

}

// ...passed into:
const Header = () => {
  return (
    <HeaderContainer>
      <Centered direction="left">
        <h1>Raphael Hetherington</h1>
      </Centered>
    </HeaderContainer>
  )
}

这是否可行(或最佳做法)?我尝试了许多不同的方法来做,并且希望得到一些指导。

1 个答案:

答案 0 :(得分:1)

根据本文档的section,您编写的内容几乎可以正常工作,并且您的方法是执行此操作的正确方法之一。

通过<Abs direction>,您正在传递direction = true。 这不是您想要的。用<Abs direction={direction}>对其进行修改。

请注意,有时您不希望修改UI组件,并且无论身在何处,都可以使用css中的styled-component道具来覆盖它。例如,您可以执行以下操作:

import styled, { css } from 'styled-components'

const Abs = styled.div`
    position: absolute;
    top: 50%;
`

const Centered = ({ children, direction }) =>
    <Rel>
      <Abs css={direction === 'left' ? css`left: 0;` : css`right: 0;`}>
        {children}
      </Abs>
    </Rel>
}

您可以在css here中找到有关styled-component道具的更多信息。