web-dev-qa-db-fra.com

React error Line 18: La valeur de style prop doit être un objet react / style-prop-object

J'essaie d'encapsuler du texte autour d'une image et si j'utilise le code suivant:

<div className="container">
         <img src={myImageSource} alt="swimmer" height="300" width="300" style="float: left" />
         <p> This is where the other text goes about the swimmer</p>
 </div>

Maintenant, je comprends que ce style="float: left" est html 5. Cependant, si j'utilise le code suivant:

<div className="container">
         <img src={myImageSource} alt="swimmer" height="300" width="300" align="left" />
            <p> This is where the other text goes about the swimmer</p>
 </div>

Ça marche! Pourquoi ne puis-je pas utiliser le style dans React?

htmlreactjsimage
9
AltBrian

Vous pouvez toujours utiliser le style pour réagir. Essayez: style={{float: 'left'}}

11
Shivam Gupta

Le problème est que vous passez le style en tant que String au lieu d'un Object. React s'attend à ce que vous passiez le style dans une notation d'objet:

style={{ float:`left` }}  // Object literal notation

ou une autre façon serait:

const divStyle = {
  margin: '40px',
  border: '5px solid pink'
};

<div style={divStyle}>   // Passing style as an object

Voir le documentation pour plus d'informations

7
Akrion

De la doc :

L'attribut de style accepte un objet JavaScript avec les propriétés camelCased (style={{float: 'left'}}) plutôt qu'une chaîne CSS (style="float: left") . Ceci est cohérent avec la propriété JavaScript de style DOM, est plus efficace, et empêche les failles de sécurité XSS.

Vous devez donc l'écrire comme suit:

<img src={myImageSource} alt="swimmer" height="300" width="300" style={{float: 'left'}} />
2
Arup Rakshit

Ajouter "avant et après la classe de style et la valeur a fonctionné pour moi.

0
Two Pheat

Dans le cas où une propriété (par exemple, 'align-self') a des caractères spéciaux, vous devez également utiliser des guillemets simples pour le nom de la propriété, par exemple

style={{'align-self':'flex-end'}}

Vous pouvez voir un avertissement "Propriété de style non prise en charge align-self. Vouliez-vous dire alignSelf?", Mais le style est copié correctement dans le code HTML généré align-self: flex-end;.

0
MiFreidgeim SO-stop being evil