这个问题在这里已有答案:
相邻的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>
});
在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>)
});