javascript - 相邻的 JSX 元素必须包含在一个封闭的 Reactjs 标签中

Question

这个问题已经有答案了:

Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag (16 个回答)

已关闭 4 年前。

相邻的 JSX 元素必须包含在一个封闭的 Reactjs 标签中

我的代码有什么问题吗？

错误代码调用如下:

Adjacent JSX element must be wrapped in an enclosing tag

元素标签中的代码有错误

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>
    });

Answer 1

在 React 中我们必须返回单个元素。在你的情况下，你可以用 div 或 React.Fragment 包裹它。

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>)
    });