Comment puis-je déclarer une variable entre crochets?

Je pense que l'une des principales idées de react est d'utiliser des composants pour structurer votre code.

Une façon de procéder serait donc la suivante:

render() {
    const statement = true;

    const Stuff = ({statement}) => {
      if (!statement) { return null; }
      return this.buildStuff();
    }

    return (
      <div>
        <p>
          <Stuff statement={statement} /> 
        </p>
        <p>
          <Stuff statement={statement} />
        </p>
        <p>
          <Stuff statement={statement} />
        </p>
      </div>
    );
  }

Mise à jour StackBlitz .

Vous pouvez également essayer quelque chose comme ceci:

• Vous pouvez créer une fonction qui traite cette représentation de l'interface utilisateur.
• Dans cette fonction, vous pouvez appeler buildStuff et lui faire renvoyer 3 balises
  .
• Ensuite, dans le rendu principal, vous pouvez vérifier votre condition et effectuer le rendu en conséquence. Cela rendra votre rendu propre et déclaratif.

getBuildJSX() {
  const stuff = this.buildStuff();
  return Array.from({ length: 3}, () => <p> { stuff }</p>);
}

render() {
  const statement = true
  return (
    <div>
      {
        statement ? this.getBuilsJSX() : null
      }
    </div>
  );
}

Essayez-le en ligne

Première solution (modifier: alternative)

// JSX  
<div id="foo">Hello world</div>

// Translates into 
React.createElement("div", {id: "foo"}, "Hello world");

// JSX
<div>{ statement && <div /> }</div>

// Translates to
React.createElement("div", null, statement && React.createElement("div"));

Alternative, mémorisation (mise en cache des fonctions) si tel est votre objectif:

// Stuff is a component now
const Stuff = ({statement, stuff}) => {
  if(!statement)
    return null;

  const result = stuff();

  return (
    <div>   
      <p>
        {result}
      </p>
      <p>
        {result}
      </p>
      <p>
        {result}
      </p>
    </div>
  )
}

render() {
    return (
      <div>
        <Stuff statement={true} stuff={this.buildStuff} />
      </div>
    );
  }

Le vrai pouvoir de la mémorisation est cependant, si vous mettez en cache en fonction du paramètre que vous donnez à buildStuff (peut-être que vous déplacez l'instruction dans buildstuff?). Dans votre cas, je nettoierais simplement le composant et les paramètres en faveur de la lisibilité plutôt que d'optimiser quelque chose. Donc dernière alternative:

const memoize = require('fast-memoize');
const memoized = memoize(this.buildStuff);


...

render() {
    const statement = true; 
    return (
      <div>
        {
          statement &&
          <div>
            <p>
              {memoized()}
            </p>
            <p>
              {memoized()}
            </p>
            <p>
              {memoized()}
            </p>
          </div>
        }
      </div>
    );
  }

L'avantage, vous pouvez maintenant choisir de passer le résultat ou la fonction elle-même à travers les accessoires, et dans le composant descendant soit appeler la fonction ou simplement avoir son résultats transmis.

Réponse unique à votre question dans le titre: vous ne pouvez pas, JSX n'est pas un moteur de création de modèles comme Razor.

Explication: p>

render() {
    const statement = true;
    const stuff = this.buildStuff(statement, 3); // jsx result looped in divs
    return (
      <div>
        {
          statement &&
          <div>
            { stuff }
          </div>
        }
      </div>
    );
  }

Soit vous déclarez une nouvelle variable avec un attribut, soit vous ne pouvez tout simplement pas, car javascript ne permet pas la création de variables à l'intérieur des paramètres des fonctions.

Cette réponse est une réponse au problème mais pas une solution à la question. Si vous ne pouvez pas déclarer une variable entre crochets dans react (comme vous pourriez le faire dans Razor par exemple). Appeler deux fois une instruction peut toujours être votre meilleur pari.

render() {
    const statement = true
    const stuff = statement ? this.buildStuff() : null
    return (
      <div>
        {
          statement &&
          <div>
            <p>
              {stuff}
            </p>
            <p>
              {stuff}
            </p>
            <p>
              {stuff}
            </p>
          </div>
        }
      </div>
    );
  }

Au moins, nous appelons this.buildStuff () uniquement si nécessaire et si nous le faisons, nous l'appelons une seule fois.