在JSX中嵌入表达式

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

是的，允许使用此语法让我引用文档的某些部分......

在JSX中嵌入表达式

您可以在JSX中嵌入任何JavaScript表达式，方法是将它包装在大括号中。

Link

JSX也是一个表达式

编译后，JSX表达式成为常规的JavaScript对象。

Link

关于JSX中允许的内容，这两个句子相互完成。

因为它的输出只是JS，所以你可以在JSX元素中递归嵌入JS块，其中包含其他JSX元素等等。
这很好。

Answer 2

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

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

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

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

2 个答案:

在JSX中嵌入表达式

JSX也是一个表达式