Как я могу объявить переменную в скобках?

Вы можете попробовать что-то вроде этого:

• Вы можете создать функцию, которая работает с этим представлением пользовательского интерфейса.
• В этой функции вы можете вызвать buildStuff и вернуть ей 3 <p> тега.
• Затем в основном рендере вы можете проверить свое состояние и сделать рендеринг соответственно. Это сделает ваш рендер чистым и декларативным.

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

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

Попробуйте онлайн

Первое решение (правка: альтернатива)

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

Альтернатива, запоминание (кэширование функций), если это ваша цель:

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>
    );
  }

Истинная сила запоминания, однако, если вы кешируете на основе параметра, который вы даете buildStuff (может быть, вы переместите оператор в buildstuff?). В вашем случае я бы просто очистил компонент и параметры для удобства чтения, а не для оптимизации чего-либо. Итак, последний вариант:

// 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>
    );
  }

Теперь вы можете выбирать, передавать ли результат или саму функцию через подпорки, а в нисходящем компоненте либо вызывать функцию, либо просто передавать ее результаты. [117 ]

Единственный ответ на ваш вопрос в заголовке: вы не можете, JSX не шаблонизатор, как Razor.

Объяснение:

// 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"));

Либо вы объявляете новую переменную с атрибутом, либо вы просто не можете, поскольку javascript не позволяет создавать переменные внутри параметров функций.

Я думаю, что одной из основных идей реагирования является использование компонентов для структурирования вашего кода.

Так что один из способов сделать это было бы так:

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>
    );
  }

Обновлен StackBlitz .

Этот ответ является ответом на проблему, но не решением вопроса. Если вы не можете объявить переменную внутри скобок в реакции (как вы могли бы сделать, например, в Razor). Лучше всего сделать ставку дважды, сделав выписку.

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>
    );
  }

По крайней мере, мы называем this.buildStuff() только при необходимости, и если мы делаем, мы называем это только один раз.