尝试在类中重写 css 时的 JavaScript 语法错误

Question

我尝试通过选择组件类并将其更改为不显示任何内容来隐藏 react-js 项目中的组件，但出现了此语法错误

Syntax error: Unexpected token, expected ; (12:25)
if (window.location.pathname === "/") {
> 12 |         handleChange(event){
|                          ^
13 | 
14 |         var x = document.getElementByClassName("kontaktformular");
15 |         x.style.display = "none";

这也是我的代码

if (window.location.pathname === "/") {
handleChange(event) {
var x = document.getElementByClassName("kontaktformular");
x.style.display = "none";
}
} else {
x.style.display = "block";
}

Answer 1

你可能想要这个：

handleChange(event) {
var x = document.getElementsByClassName("kontaktformular")[0];
if (window.location.pathname === "/") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}

但是，这根本不是 React 的方式。正确的解决方案是不根据当前路由呈现联系表单。
至少你会想要使用这样的东西：

render() {
return (
<div>
...
{ window.location.pathname !== "/" && <KontaktFormular /> }
...
</div>
);
}

参考： https://reactjs.org/docs/conditional-rendering.html

Answer 2

你应该这样做

var x = document.getElementByClassName("kontaktformular");
if (window.location.pathname === "/") {
x.style.display = "none";
} else {
x.style.display = "block";
}