1
votes

Deuxième couche d'énoncé conditionnel dans la condition en ligne réagit

J'essaie de vérifier l'état du déclencheur s'il est nouveau, et après cela, je dois vérifier une autre condition et en fonction de laquelle je dois afficher tagone ou tagtwo.

J'ai essayé de trouver de la documentation en ligne à ce sujet.

<modalscrolling  onClose={this.props.toggleModal} open={openModal} 
 trigger={isNew ? 
<sometag /> : 
<TagOne  />}>
<TagTwp />}
>

L'autre approche que j'essaie est de l'envoyer à une fonction différente. Toutes les suggestions pour résoudre ce problème :)

reactjs

1 commentaires

Ou vous pouvez affecter un composant à cette variable avant le retour au rendu?

4 Réponses :

0
votes

L'opérateur ternaire est une meilleure option car il aide à comprendre le balisage du composant. Si les parties conditionnelles sont volumineuses, convertissez-les en composants fonctionnels séparés.

0 commentaires

0
votes

trigger = {isNew? : {anothercond? : }} .

Est-ce ce que vous recherchez?

0 commentaires

2
votes

Vous pouvez faire quelque chose comme ceci:

<modalscrolling  onClose={this.props.toggleModal} open={openModal} 
 trigger={isNew ? <SomeTag /> : secondLevelCondition ? <TagOne  /> :<TagTwp /> }
/>

0 commentaires

2
votes

vous pouvez avoir des opérateurs ternaires imbriqués comme suit,

App.js

import React from "react";
import "./styles.css";

const AnotherCompoent = ({ tag }) => {
  return tag === 1 ? <span>tag1</span> : <span>tag2</span>;
};

export default function App() {
  var isNew = true;
  var tag = 1;
  return (
    <div className="App">
      {isNew ? <AnotherCompoent tag={tag} /> : <span>notnew</span>}
    </div>
  );
}

démo: https://codesandbox.io/s/ecstatic-shape-r64i8

mais je suggérerais extraire une opération teranaire vers un autre composant de fonction qui prend "tag" comme entrée. cela aide à étendre votre code facilement et à le rendre plus lisible.

App.js avec un autre après refactorisation

import React from "react";
import "./styles.css";
export default function App() {
  var isNew = true;
  var tag = 1;
  return (
    <div className="App">
      {isNew ? (
        tag === 1 ? (
          <span>tag1</span>
        ) : (
          <span>tag2</span>
        )
      ) : (
        <span>notnew</span>
      )}
    </div>
  );
}

démo : https://codesandbox.io/s/affectionate-hertz-1ou77 p>

1 commentaires

J'ai dû changer la commande, mais cela a fonctionné à merveille. Le concept secondaire (un autre composant) est une excellente approche - la meilleure approche possible, j'ai trop de paramètres à changer et je décide donc de choisir le premier.