相邻的 JSX 元素必须包含在封闭标记 reactjs [重复]答案

【问题标题】：Adjacent JSX Elements must be wrapped in an enclosing tag reactjs [duplicate]相邻的 JSX 元素必须包含在封闭标记 reactjs [重复]
【发布时间】：2019-02-09 02:09:19
【问题描述】：

相邻的 JSX 元素必须被封装在一个封闭标签 reactjs 中

我的代码有什么问题？？

这样的错误代码调用：

相邻的 JSX 元素必须包含在封闭标记中

元素标签中的代码错误

const renderTodos = currentTodos.map((todo, index) => {
  return <table style={{ width: '100%', maxWidth: '100%', padding: '1%' }} >
	   <tbody>
		    <tr>
			     <td style={{ width: '70%', padding: '2%' }}> 
              <span style={title}>
                 <b>
                   <Link to={`/berita/${todo.id}`} style={{ color: 'black' }}> 
                       {todo.title} 
                   </Link>
                   </b>
                   </span> 
                   <p> 
                    {todo.content=todo.content.replace(regex, '').substring(0, 150)} 
                     <a href="/">...Read More </a>
                         </p> 
                                <p style={content}>
                                     By <i> {todo.author ? todo.author : this.props.default} </i> 
                                </p>
                                <p style={content}> 
                                     <Moment date={todo.created_date} />  
                                </p>
                            </td>
			                <td style={{ width: '30%' }}>                                  
                                 <img 
                                    src={todo.link_image} 
                                    alt="" 
                                    className={responsive_image__image}
                                    style={responsive_image}
                                 /> 
                            </td>
		                </tr>
	                </tbody>
                </table>;
                
            <BrowserRouter>
                <div>    
                    <Switch>
                        <Route path="/berita/:id" component={BeritaView} /> 
                    </Switch>
                </div>
            </BrowserRouter>
    });

【问题讨论】：

错误信息非常不言自明，而且这个问题已经在这个网站上被问和回答了很多次。将组件包装在单个根元素中或使用片段。并且至少在发布 SO 帖子之前搜索您的错误消息，答案是第一个结果。
@Jayce444 表示在标签之前我包装标签
??
看看下面 Leo 的回答，他向你展示了如何将它们包装在一个 div 中

const renderTodos = currentTodos.map((todo, index) => { return (<div> <table style={{ width: '100%', maxWidth: '100%', padding: '1%' }} > <tbody> <tr> <td style={{ width: '70%', padding: '2%' }}> <span style={title}> <b> <Link to={`/berita/${todo.id}`} style={{ color: 'black' }}> {todo.title} </Link> </b> </span> <p> {todo.content=todo.content.replace(regex, '').substring(0, 150)} <a href="/">...Read More </a> </p> <p style={content}> By <i> {todo.author ? todo.author : this.props.default} </i> </p> <p style={content}> <Moment date={todo.created_date} /> </p> </td> <td style={{ width: '30%' }}> <img src={todo.link_image} alt="" className={responsive_image__image} style={responsive_image} /> </td> </tr> </tbody> </table> <BrowserRouter> <div> <Switch> <Route path="/berita/:id" component={BeritaView} /> </Switch> </div> </BrowserRouter> </div>) });