:: after不适用于React道具，但适用于常规文本

Question

我有一个具有某些属性的react组件。其中之一是altText。我希望我的div有一个::after，而content是道具altText。

我尝试了类似（样式化组件）：

const StyledImage = styled.div`
    &::after {
        content: ${props => props.altText};
        color: black;
    }
`;

//

export const Image = ({src, altText, size, scale}) => {
    const imageProps = {
        src: src,
        altText: altText,
        size: size,
        scale: scale,
    }

    return (
        <StyledImage {...imageProps}>
            <img src={imageProps.src} alt={imageProps.altText}/>
        </StyledImage>
    )
}

（我不是在谈论alt的img，这是别的）]

我称这个组件如下：

<Image src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" altText="hello"/>

这不起作用。但是，当我将content: ${props => props.altText};更改为content: 'hello'时，它可以很好地工作。我确保altText是string是。

这里是什么问题？

Answer 1

（（Jayce444的答案）：

目前无法测试，但您是否尝试过在altText值两边加上引号，例如，内容：'${props => props.altText}';]]