为什么我得到 JSX 元素必须有父元素？答案

【问题标题】：Why am I getting JSX element must have parent element?为什么我得到 JSX 元素必须有父元素？
【发布时间】：2020-04-29 10:56:59
【问题描述】：

好的，我检查了是否所有内容都包含在我的代码中大约 100 次，但我不知道为什么会出现该错误。

这是我的代码：

render() {
    return (
      <div className="card">
          {Jobs.map((item) => (
        <div className="card-image"></div>
        <div className="card-text">
          <span className="date">{item.date}</span>
          <h2>{item.Job}</h2>
          <ul>
            <li>{item.description}</li>
          </ul>
        </div>
          ))
  }
        </div>
    )

        }
    }

【问题讨论】：

看起来您需要在地图返回中添加一个包装器元素，因为它当前返回多个元素。

标签： reactjs

【解决方案1】：

您从 .map 返回多个元素。您需要将这两个元素都包装在 React.Fragment 或 <> 中

render(){
    return (
        <div className="card">
            {Jobs.map((item) => (
                <>
                <div className="card-image"></div>
                <div className="card-text">
                    <span className="date">{item.date}</span>
                    <h2>{item.Job}</h2>
                    <ul>
                        <li>{item.description}</li>
                    </ul>
                </div>
                </>
          ))}
        </div>
    )

}

【讨论】：

【解决方案2】：

最后你有一个额外的}。

试试：

render() {
    return (
      <div className="card">
          {Jobs.map((item) => (
           <div className="card-image"></div>
           <div className="card-text">
             <span className="date">{item.date}</span>
             <h2>{item.Job}</h2>
             <ul>
               <li>{item.description}</li>
             </ul>
           </div>
          ))}
      </div>
    )
}

【讨论】：

这只是 OP 的懒惰部分，问题是 .map 中返回多个元素。