条件渲染不适用于样式组件

时间:2020-05-18 06:07:33

标签: javascript reactjs styled-components

我有这个带有一些属性的React组件,并且我希望样式仅在该属性具有值时才适用,我尝试过这样的事情:

export const Text = ({text, color, size, fontFamily}) => {

    const StyledParagraph = styled.p`
        margin: 0;
        font-size: ${props => props.size !== undefined ? props.size : '1.3em'};
    `;

    const textProps = {
        text: [text],
        color: [color],
        size: [size],
        fontFamily: [fontFamily],
    }

    return (
        <StyledParagraph {...textProps}>{text}</StyledParagraph>
    )
}

我这样称呼它:

<Text text="some text"/>

我没有传递属性size,所以我希望font-size是我指定的默认值(font-size: ${props => props.size !== undefined ? props.size : '1.3em'}

但是,这不起作用。我在这里想念什么?预先感谢。

2 个答案:

答案 0 :(得分:3)

您错误地定义了textProps的值。通过使用[],您已将每个属性组成一个数组,这就是为什么当您尝试在样式组件中使用它时它不起作用的原因

如下使用

const textProps = {
    text: text,
    color: color,
    size: size,
    fontFamily: fontFamily,
}

答案 1 :(得分:1)

问题是如何通过将已分解的props放置到数组中来定义textProps的值。

更新至

const textProps = {
  text: text,
  color: color,
  size: size,
  fontFamily: fontFamily
};

Edit recursing-nobel-wghcl

建议:

  • StyledParagraph排除在外,因此不会重新定义Text的每个渲染器
  • 分解text并将其余道具散布到props中, 传播到渲染的StyledParagraph
  • 将字体大小逻辑简化为简单的后备值。

代码

const StyledParagraph = styled.p`
  margin: 0;
  font-size: ${props => props.size || "1.3rem"};
`;

const Text = ({ text, ...props }) => {
  return <StyledParagraph {...props}>{text}</StyledParagraph>;
};