相邻的JSX Elements必须包装在一个封闭的标签reactjs中

Question

相邻的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>
    });

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