CSS 伪代码"li::before" React 内联样式

Question

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

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

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

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

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

Answer 2

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

style 属性的值必须与 CSS 声明块(不包括分隔大括号(的内容语法匹配，其形式语法在下面以 CSS 核心语法的术语和约定给出：

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

Answer 3

1. "&::before": { ...react style here }
2. 您必须具有属性content: `''`

例：

content: {
display: "flex",
margin: 10,
"&::before": {
content: `''`,
position: 'absolute',
left: '-50px',
top: '50px',
width: '0',
height: '0',
border: '50px solid transparent',
borderTopColor: 'red',
}
},

希望这有帮助！

Answer 4

React 没有 CSS 伪元素。这个想法是用Javascript的方式解决。简而言之，在 DOM 元素之前或之后添加一个span。我觉得它很好，比CSS更强大。例如，看看我构建的主题反应

const beforeImg = (
<img
src={screenshot5}
style={{
width: '216px',
marginTop: '87px',
marginLeft: '79px',
height: '393px'
}}
/>
)
export const FormSection = {
margin: '0 0 10px',
color: '#262626',
backgroundColor: '#fff',
border: '1px solid #e6e6e6',
borderRadius: '1px',
textAlign: 'center',
width: '350px',
display: 'inline-block',
verticalAlign: 'middle',
before: {
content: beforeImg,
display: 'inline-block',
width: '400px',
height: '560px',
verticalAlign: 'middle',
backgroundImage: 'url(' + home_phone + ')',
backgroundSize: '400px 560px'
}
}

然后在render方法中查找.before属性，使用样式呈现content。