我正在尝试寻找一种动态创建“将此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>
)
}
这是否可行(或最佳做法)?我尝试了许多不同的方法来做,并且希望得到一些指导。
答案 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
道具的更多信息。