0
votes

Quel est le problème avec ce ternaire de style en ligne

Je reçois juste une erreur ici. J'essaie de donner du style à une certaine condition et je ne sais pas trop pourquoi cela ne fonctionne pas. Si le unittestsmode === 'database' , il doit renvoyer la première ligne, sinon s'il s'agit d'un objet, il doit renvoyer la seconde.

<div  {unitTestsMode === 'Database' ? style={width: '30%', marginRight: '10px'} : style={width: '20%'}  }>
  <DropdownSingle
    options={['Object', 'Database']}
    value='Object'
    name='Search unit tests'
    onChange={onChangeUnitTestsMode}
  />
</div>

reactjs

2 commentaires

cela a à voir avec ce qui se passe lorsque le composant est transformé de JSX en javascript. Le moyen le plus simple de le faire avec un seul attribut est de placer l'instruction ternaire dans l'attribut et non autour de lui, c'est-à-dire

style = {unitTestsMode === 'Base de données'? {width: '30% ', marginRight:' 10px '}: {width: '20%'}}

3 Réponses :

2
votes

Ce devrait être un objet conditionnel pour style

<div style={unitTestsMode === 'Database' ? {width: '30%', marginRight: '10px'} : {width: '20%'}}>
    <DropdownSingle
        options={['Object', 'Database']}
        value='Object'
        name='Search unit tests'
        onChange={onChangeUnitTestsMode}
    />
</div>

0 commentaires

0
votes

Vous pouvez effectuer le rendu conditionnel dans une variable distincte et en fonction de la réponse, définir le style de la div.

const unitTestsMode = 'Database';

const style = unitTestsMode==='Database'? {width: '30%', marginRight: '10px'}: {width: '20%'}
 
  <div style={style}>

0 commentaires

0
votes

Puisque vous modifiez une propriété de l'objet style , je ferais quelque chose comme ceci où vous avez un opérateur ternaire pour la propriété width . Vous pouvez également importer le contenu de l'accessoire style dans une variable distincte pour des raisons d'organisation.

<div style={{
   marginRight: '10px',
   width: unitTestsMode === 'Database' ? '30%' : '20%',
}}>
  <DropdownSingle
    options={['Object', 'Database']}
    name='Search unit tests'
    onChange={onChangeUnitTestsMode}
    value='Object'
  />
</div>

0 commentaires