Question

我有一个像这样的渲染功能：

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

为避免多次调用buildStuff()，我想将其分配给一个变量。如何在statement &&行后声明变量？

一个快速的解决方案是

const statement = true
const stuff = statement ? buildStuff() : null;

但是此解决方案使用两个分支而不是一个。

您可以在StackBlitz上尝试使用此代码。

这是Razor中的样子。

Answer 1

您也可以尝试以下操作：

您可以创建一个处理此UI表示形式的函数。
在此功能中，您可以调用<script> export default { name: 'BaseFile', props: { label: { type: String }, value: { type: [Object, File}, placeholder: { type: String, default: "Choose a file..." }, acceptedExtensions: { type: String, default: "image/jpeg, image/png" } }, methods: { updateValue(value) { // console.log(typeof value) // console.log(event.target.value) this.$emit('input', value); } } } </script>并使其返回3个buildStuff标签。
然后在主渲染中，您可以检查条件并进行相应渲染。这将使您的渲染清晰明了。

<p>

Try it online

Answer 2

第一个解决方案（编辑：替代方法）

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

好处是，您现在可以选择通过props传递结果或函数本身，并在向下的组件中调用函数或简单地传递其结果。

标题中单个问题的答案：您不能，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不允许在函数的参数内部创建变量。

Answer 3

我认为react的主要思想之一是使用组件来构造代码。

因此，一种方法是这样的：

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。

Answer 4

此答案是对问题的答案，而不是问题的解决方案。如果您无法在react中的方括号内声明变量（例如，在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()，如果需要，我们仅调用一次。

如何在方括号内声明变量？

4 个答案: