1
votes

Comment ajouter dynamiquement des styles à un attribut de style React?

J'essaie actuellement d'utiliser l'attribut de style React pour styliser dynamiquement les composants React. La première condition de style utilisant l'attribut fonctionne correctement, mais à la deuxième condition, j'obtiens cette erreur: "Erreur d'analyse: jeton inattendu, attendu"} "" Voici mon code:

<input
  className="inputFieldComponent"
  id={field.name}
  type={field.type}
  value={value}
  disabled={(parentState.primaryVinRetrieved && field.name === 'makePrimary')
  || (parentState.primaryVinRetrieved && field.name === 'modelPrimary')
  || (parentState.secondaryVinRetrieved && field.name === 'makeSecondary')
  || (parentState.secondaryVinRetrieved && field.name === 'modelSecondary')}
  placeholder={field.placeholder}
  onChange={handleInputChange}
  style={
    field.currency && {
      paddingLeft: '10px',
    }
    field.name === 'makePrimary' && {
      color: 'grey',
    }
  }
/>

En gros, j'essaye d'enchaîner des conditions supplémentaires dans l'attribut style. Je ne sais pas si c'est la syntaxe appropriée pour cela. S'il y a un meilleur moyen d'accomplir cela, veuillez le conseiller. Merci.

javascript reactjs html css jsx

0 commentaires

3 Réponses :

2
votes

Vous pouvez utiliser l ' opérateur de répartition d'objets a> - cela fonctionne bien avec la composition des objets de style:

style={{
  ...field.currency ? {
    paddingLeft: '10px',
  } : {},
  ...field.name === 'makePrimary' ? {
    color: 'grey',
    background: 'blue'
  } : {}
}}

0 commentaires

0
votes

Vous pouvez répartir des objets de manière conditionnelle.

<input
  className="inputFieldComponent"
  id={field.name}
  type={field.type}
  value={value}
  disabled={
    (parentState.primaryVinRetrieved && field.name === 'makePrimary') ||
    (parentState.primaryVinRetrieved && field.name === 'modelPrimary') ||
    (parentState.secondaryVinRetrieved && field.name === 'makeSecondary') ||
    (parentState.secondaryVinRetrieved && field.name === 'modelSecondary')
  }
  placeholder={field.placeholder}
  onChange={handleInputChange}
  style={{
    ...(field.currency
      ? {
          paddingLeft: '10px',
        }
      : {}),
    ...(field.name === 'makePrimary'
      ? {
          color: 'grey',
        }
      : {}),
  }}
/>;

0 commentaires

0
votes

Vous pouvez simplement ajouter de nouvelles propriétés dans un objet styles car les styles ne sont rien, c'est juste un objet, vous pouvez donc ajouter de nouvelles propriétés comme celle-ci:

var data = {}; data ["property"] = 4;

Ainsi, dans votre code, vous pouvez utiliser votre opérateur de style comme:

let styles = {};
if(field.name === 'makePrimary') styles["color"] = 'grey';
if(field.currency) styles["paddingLeft"] = '10px';

où, styles est:

style = { styles }

Une autre approche consiste à utiliser l'opérateur de diffusion.
Vous pouvez utiliser le composant stylisé ainsi que son aide pour passer des paramètres dynamiquement dans un fichier css. Pour plus d'informations à ce sujet, suivez le lien ci-dessous: https://styled-components.com/

0 commentaires