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

Question

我有一个获得一些属性的反应组件。其中之一是 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>
    )
}

（我说的不是img的alt，是别的）

我这样称呼这个组件：

<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 值周围加上引号，例如 content: '${props => props.altText}';

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

::after isn't working with React props but works with regular text

javascript

reactjs

styled-components

react-component