时间戳

首页 > 解决方案 > 相邻的 JSX 元素必须包含在封闭标记中。你想要一个 JSX 片段 -ReactJS

reactjs - 相邻的 JSX 元素必须包含在封闭标记中。你想要一个 JSX 片段 -ReactJS

问题描述

好吧，所以我刚开始学习反应，我想做一个博客，博客的元素在一个数组中，我通过地图函数显示博客文章问题是当我向地图函数添加一些东西时，它给了我这个错误：

Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment


   6 |          {blog.map ( (blogs) => {return (<h2>{blogs.title}</h2> 
   7 |
>  8 |              <button>Delete post</button>
     |              ^
   9 |          )})}

这是代码

const Blog_tem = (props) => {
    const blog = props.blogs;

    return (
        <div className='blog_tem'>
            {blog.map ( (blogs) => {return (<h2>{blogs.title}</h2> 

                <button>Delete post</button>
            )})}



        </div>
    );
}
export default Blog_tem;

标签： reactjsjsx

解决方案

每个地图项应该只有一个根元素（https://reactjs.org/docs/lists-and-keys.html）：

{blog.map((blogs, i) => (
  <div key={i}>
    <h2>{blogs.title}</h2> 
    <button>Delete post</button>
  </div>
))}

// with fragment if you don't want an extra element
{blog.map((blogs, i) => (
  <React.Fragment key={i}>
    <h2>{blogs.title}</h2> 
    <button>Delete post</button>
  </React.Fragment>
))}

我使用数组索引作为键，但您应该使用更一致的变量，例如博客 ID。

推荐阅读