我有一个名为“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>
)
}
}
根据您的具体情况,您可以使用data
属性。
li::before {
content: attr(data-content);
}
render = () => <li data-content={this.props.content}>{this.props.children}</li>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)