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

我有一个名为“ExplanationLists”的React组件，我想用css伪代码li::after将动态内联样式添加到li html元素中，我可以将样式与图形更好的点点。例如，css伪代码“li :: before”反应内联样式

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> 
     ) 
    } 
}

来源

2017-08-17 Chun Pin Chen

你为什么不简单地在你的''li'元素上使用'className'，然后用普通的CSS来设计呢？ –

不，这是不可能的。反应style属性使用基础HTML style属性，所以它不能有它内部的选择器。就像这个在answer中关于内联风格所述。

样式属性的值必须的CSS声明块的内容（不包括划定括号），其正式的语法在CSS核心语法术语和惯用下面给出的语法匹配：
declaration-list 
    : S* declaration? [ ';' S* declaration? ]* 
    ; 

来源

2017-08-17 08:49:10 Tr1et

React没有CSS伪元素。这个想法是用Javascript的方式解决。简单来说，在DOM元素之前或之后添加一个span。我觉得它非常好，比CSS更强大。看看a-theme-react我render方法外观例如

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' 
    } 
}

内置那么对于.before属性，呈现content与风格。

来源

2017-12-02 09:18:33

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

回答

相关问题