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

【问题标题】：::after isn't working with React props but works with regular text::after 不适用于 React 道具，但适用于常规文本
【发布时间】：2020-05-18 07:17:38
【问题描述】：

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

这里有什么问题？

【问题讨论】：

你试过content: ${props.altText}吗？
这不起作用，我收到以下错误：'props' is not defined no-undef
这不是问题
目前无法测试，但您是否尝试过在 altText 值周围加上引号，例如 content: '${props => props.altText}';
@Roy 不用担心。如果您想将其放入答案并将其标记为正确，将有助于表明该问题已结束

标签： javascript reactjs styled-components react-component

【解决方案1】：

（Jayce444 的回答）：

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

【讨论】：