它一直要求我用封闭标签包装 jsx，我想我做了我必须做的事情，它导致了问题

Question

return (
<div
className="ag-theme-balham"
style={{
height: "300px",
width: "1220px"
}}>
<AgGridReact
columnDefs={table.columns}
rowData={table.rowData2}
pagination={true}
/>
</div>
<div>
<Line
data={state}
options={{
title:{
display:true,
text:'Average Rainfall per month',
fontSize:20
},
legend:{
display:true,
position:'right'
}
}}
/>
</div>
)    

这不是使用div 的正确方法吗？它保持给我错误

解析错误：相邻的 JSX 元素必须包装在封闭标记中。您是否想要一个 JSX 片段<>...？

当我刚刚摆脱第二个div 并将行标签放入第一个div 时，它可以工作......很多天以来，我一直遇到类似的问题，并且由于无法解决它，因此总是最终转向另一种方式。问题的原因是什么？

Answer 1

你在返回中有两个div 元素。将它们包装在Fragment内

return (
<>
<div
className="ag-theme-balham"
style={{
height: "300px",
width: "1220px"
}}>
<AgGridReact
columnDefs={table.columns}
rowData={table.rowData2}
pagination={true}
/>
</div>
<div>
<Line
data={state}
options={{
title:{
display:true,
text:'Average Rainfall per month',
fontSize:20
},
legend:{
display:true,
position:'right'
}
}}
/>
</div>
</>
)