reactjs - 如何在样式组件中动态渲染内容之前的伪内容

Question

我在样式组件中动态呈现伪内容之前遇到了麻烦。

我做错了什么吗？

当我在内容之前静态渲染伪时没有问题，但当我动态尝试时它不起作用。

react 组件

const Test = (props) => {

    return (
        <Text before={12345}>
            {props.children}
        </Text>
    );

};

样式组件(不起作用)

const Text = styled.span`

    &:before {
        content: ${props => {
            console.log(props.before); // I see '12345' in log.
            return props.before;
            }
    }


`;

样式组件(效果很好)

const Text = styled.span`

    &:before {
        content: '12345'
    }


`;

Answer 1

这是因为 content 值必须在 css 的引号内

示例:

const Block = styled.div`
    &:before {
        display: absolute;
        top:0;
        content: '${props => props.before}'
    }
`

请注意，我正在利用 ES6 new features其中单语句函数不需要使用大括号{}和return。

代码笔:https://codepen.io/metju/pen/zEKeOm