如何将一组 html 标签添加到 jsx答案

【问题标题】：how can i add an array of html tags to jsx如何将一组 html 标签添加到 jsx
【发布时间】：2022-01-09 22:45:07
【问题描述】：

我是 react 新手，但我遇到了一个问题，我在搜索后没有找到任何解决方案。

当我将 html 标签数组存储在变量中时，我得到 minified React error #31

var k = [1,2,3];
var x = k.map(e=><li>{e}</li>);
var e = (
  <div>         
    <ul>
      {1 && {x}}
    <ul>
  </div>
);
var divTag = document.getElementById("k");
ReactDOM.render(e,divTag)

但是当我写这个时，我没有得到任何错误。

var k = [1,2,3];
var x = k.map(e=><li>{e}</li>);
var e = (
  <div>         
    <ul>
      {1 && k.map(e=><li>{e}</li>)}
    <ul>
  </div>
);
var divTag = document.getElementById("k");
ReactDOM.render(e,divTag)

【问题讨论】：

实际上，第二次看它是你的渲染条件使对象。 {1 && {x}} 应该只是 {1 && x}。第一个创建一个作为子对象无效的对象{1 && {x: [...]}
使用{1 && x}，因为{x} is interpreted as the object literal property value shorthand for {x: x}`

标签： javascript reactjs babeljs jsx react-dom

【解决方案1】：

您需要删除x 变量{1 && {x}} -> {1 && x} 周围的花括号

您正在定义一个包含键 x 的新对象，而不是仅仅传递数组来响应

【讨论】：

【解决方案2】：

解决方案

将{1 && {x}} 替换为{1 && x}

因为您已将 x 包裹在花括号中，所以您遇到了呈现错误（您想提供数组）。

【讨论】：