我有一个名为“ExplanationLists”的React组件,我想使用css伪代码li::after
将动态内联样式添加到li
html元素中,方式我可以更好地用图形来设计要点。例如,
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>
)
}
}
最佳答案
在您的特定情况下,您可以使用data
属性。
li::before {
content: attr(data-content);
}
render = () => <li data-content={this.props.content}>{this.props.children}</li>
关于reactjs - React内联样式中的css伪代码 "li::before",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45730224/