redux-form：需要帮助理解语法

Question

我正在浏览 redux-form 的视频。我找到了以下代码：

const renderInput = ({ input, meta, label}) =>
      <div>
        <label>{label}</label>
        <input {...input} />
        {meta.error &&
          <span>
            {meta.error}
          </span>}
      </div>

我没看懂下面的片段：

    {meta.error &&
      <span>
        {meta.error}
      </span>}

我们可以在 {} 中使用 jsx 吗？这里 <span> 在 {} 内部使用。我以为只使用 javascript 个变量或表达式？

Answer 1

是的，这种语法是允许的。
让我引用文档的一些部分...

Embedding Expressions in JSX

You can embed any JavaScript expression in JSX by wrapping it in curly braces.

Link

JSX is an expression too

After compilation, JSX expressions become regular JavaScript objects.

Link

关于 JSX 允许的内容，这两句话相互补充。

因为它的输出只是简单的 JS，所以你可以递归地将 JS 块嵌入到 JSX 元素中，并在其中嵌入其他 JSX 元素等等。
完全没问题。

Answer 2

添加到@gustavohenke 的回答，代码段

  <div>
    <label>{label}</label>
    <input {...input} />
    {meta.error &&
      <span>
        {meta.error}
      </span>}
  </div>

用于有条件地呈现包含 meta.error 的内容（可能是错误消息）的 <span> 元素，如果 meta.error 具有某些值。该代码使用 short circuit evaluation 来执行相同的操作。希望你现在就明白了！

redux-form：需要帮助理解语法

redux-form: need help in understanding syntax

jsx

reactjs

redux-form

Embedding Expressions in JSX

JSX is an expression too