反应内联样式的css伪代码“li::before”

Question

我有一个名为“ExplanationLists”的 React 组件，我想li使用 css 伪代码将动态内联样式添加到html 元素中li::after，这样我就可以更好地使用图形来设置项目符号的样式。例如，

li::before {
    content: dynamic_content;
}

但是，我无法真正做到这一点。任何建议将不胜感激。

下面是我写的代码。

class ExplanationLists extends Component{
    populateHtml(){
        // asign lists data into variable "items"
        var items = this.props.items; 

        // loop though items and pass dynamic style into li element
        const html = items.map(function(item){
            var divStyle = {
                display: "list-item",
                listStyleImage: 
                    'url(' +  
                    '/images/icons/batchfield_fotograf_rosenheim_icon_' + 
                    item.icon +
                    '.png' +
                    ')'   
            };  

            // html templating 
            return (
                 <li style={divStyle}>
                   <h3 >{item.title}</h3>
                   <p>{item.desc}</p>
                 </li>
            );
        });

        // return html
        return html;
    }

    render(){
        return (
            <ul>
                {this.populateHtml()}
            </ul>
        )
    }
}

Answer 1

不，这是不可能的。Reactstyle属性底层使用 HTMLstyle属性，因此它内部不能有选择器。就像这个关于内联样式的答案中所述。

style 属性的值必须与 CSS 声明块内容的语法相匹配（不包括定界大括号），其正式语法在下面的 CSS 核心语法的术语和约定中给出：

declaration-list
  : S* declaration? [ ';' S* declaration? ]*
  ;

Answer 2

在您的特定情况下，您可以使用data属性。

li::before {
  content: attr(data-content);
}

render = () => <li data-content={this.props.content}>{this.props.children}</li>