web-dev-qa-db-fra.com

pseudo code css "li :: before" dans le style de réaction en ligne

J'ai un composant React appelé "ExplanationLists", je voudrais ajouter un style dynamique en ligne dans l'élément li html avec le pseudo-code css li::after, la façon dont je peux mieux styliser le point avec un graphique. Par exemple,

li::before {
    content: dynamic_content;
}

Cependant, je ne pouvais pas vraiment y arriver. Toute suggestion serait appréciée.

Voici le code que j'ai écrit.

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>
        )
    }
}
reactjsinline-styles
6
Chun Pin Chen

Non, ce n'est pas possible. React style attribut utilise l'attribut HTML style sous-jacent, donc il ne peut pas avoir de sélecteurs à l'intérieur. Comme indiqué dans ce réponse à propos de style en ligne.

La valeur de l'attribut style doit correspondre à la syntaxe du contenu d'un bloc de déclaration CSS (à l'exclusion des accolades de délimitation), dont la grammaire formelle est donnée ci-dessous dans les termes et conventions de la grammaire de base CSS:

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

Reportez-vous à cela lien .

  1. "&::before": { ...react style here }
  2. vous devez avoir l'attribut content: `''`

exemple:


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

J'espère que cela t'aides!

1
nokieng