按钮超链接在react jsx中不起作用

Question

嗨，我做了一个加载的页面，但它给了我一个错误，我不确定从什么，所以我来到这里问你是否知道是什么原因造成的。错误信息:

srccomponentspages booking .js出现错误第24:12行:解析错误:相邻的JSX元素必须用封闭标记包装。您是否需要一个JSX片段<>…?(书》第24章12节)代码:

import React, { Component } from "react";
//just initialised but will have to get rid of css later
function click() {
window.onload = function(){
if(document.getElementById("ArtsButt").onclick) {
window.open("link 1");
}
if(document.getElementById("SciButt").onclick) {
window.open("link 2");
}
if(document.getElementById("EveButt").onclick) {
window.open("link 3");
}
}
}

class Bookings extends Component {
render() {
click();
return (
<button type="button" id="ArtsButt">Arts</button>
<button type="button" id="SciButt">Sciences+Eng</button>
<button type="button" id="EveButt">Evening</button>
)
}
}
export default Bookings;

如果你知道如何解决这个问题，请让我知道，谢谢

Answer 1

React组件必须返回单个React Node，因此你的节点必须有一个共同的单亲，你可以用React包装它们。片段，例如:

<>
<button type="button" id="ArtsButt">
Arts
</button>
<button type="button" id="SciButt">
Sciences+Eng
</button>
<button type="button" id="EveButt">
Evening
</button>
</>