JSX 不会在 for 循环中编译

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 < > 语法只是一种声明性的方式来编写 return 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, like <li key={item.id}>. Using the array index as key is not a good idea，并且使用 item 本身只是一个好主意 如果每个项都是唯一的（并且原始值）。

JSX 不会在 for 循环中编译

JSX does not compile in for loop

jsx

reactjs