Question

以下代码无法正确编译为JSX：

  let headerText = "";
  if (objArgs.column.name instanceof Array) {
    headerText = <ul>;
    objArgs.column.name.forEach( (item, idx) => {
        headerText = headerText + <li> +  item + </li>;
        return headerText;
      }
    );
    headerText = headerText + </ul>;
  }

我只想使用JSX从数组中创建一个列表。错误表示支架不合适。一旦我删除了JSX元素，它就会再次运行。我在这个片段中正确使用JSX吗？

Answer 1

您正在尝试将JSX节点连接成一个字符串：

let headerText = "";
...
headerText = headerText + <li> + item + </li>

这不是JSX的工作方式。 JSX与构建使用innerHTML设置的HTML字符串不同。相反，它是一个React将呈现给HTML的对象节点结构，而JSX < >语法只是一种编写返回JSX节点的函数调用的声明方式。

你可能想要的是这样的：

let headerText;
if (objArgs.column.name instanceof Array) {
  headerText = <ul>
    { objArgs.column.name.map(item => <li>{item}</li>) }
  </ul>;
}

现在你可以在某处渲染整个headerText。

备注：

headerText是null（呈现为空）或JSX节点数组（呈现列表）。

使用{ value }在JSX中呈现有效的JS值，而不是+ value +。

您可以使用Array.map()将数组转换为JSX节点，并将其呈现在另一个JSX节点中，如<ul>{ array.map(...) }</ul>。这是向JSX呈现数组的常用方法。

您的<li>项should have a key，例如<li key={item.id}>。使用数组index as key is not a good idea并使用item本身只是一个好主意如果每个项目都是唯一的（和原始值）。

JSX不在for循环中编译

1 个答案: