如何在我的 JS 文件中发表评论?使用 HTML 语法错误和 JS 错误?
How can I comment within my JS file? Using HTML syntax errors and JS erros?
如果我把 //
告诉 JS 编译器我想发表评论,它会呈现它,但是如果我放置 html 语法,它会出错并显示 Parsing
如果我使用 HTML 语法,当我使用 JS 时它显示编译失败,它显示文本
这是我的 Join.js 文件
import React,{ useState} from 'react';
import {Link} from "react-router-dom";//Link to our /chat path
/*importing my styles*/
import './Join.css';
export default function SignIn() {
//I must always declare hooks within function based
//component and no where else
//first element in index is the nameof the variable and the second is the setter func
//name is a state and setName is a function that is the setter of the state
//I am passing the name Stage an empty string
const [name, setName] = useState('');
//State #2
const [room, setRoom] = useState('');
return (
<div className="joinOuterContainer">
<div className="joinInnerContainer">
<h1 className="heading">Join</h1>
// OnChange Handler: logic of the component happens. When the user types sth in the textbox
//An Event will be raised
return(
<div>
<input placeholder="Name" className="joinInput" type="text" onChange={(event) => setName(event.target.value)}/>
</div>
<div>
<input placeholder="Room" className="joinInput mt-20" type="text" onChange={(event) => setRoom(event.target.value)}/>
</div>
{/*Link will lead us to chat but we have to pass in parameters thanks to the question mark
Prevent the user from logging in if the input validatio usrename and pass are wrong since this will break out app*/}
{/*Raise the event only if the condition is met*/}
<Link onClick={e => (!name || !room) ? e.preventDefault() : null} to={`/chat?name=${name}&room=${room}`}>
<button className="button mt-20" type="submit">Sign In 968 6342 56837</button>
</Link>
</div>
</div>
);
}
您可以使用以下方法在 jsx 中添加评论:{}
例如
export default function SignIn() {
return <div>
{
// woohoo!
}
{/* oooooh ya */}
</div>
}
如果我把 //
告诉 JS 编译器我想发表评论,它会呈现它,但是如果我放置 html 语法,它会出错并显示 Parsing
如果我使用 HTML 语法,当我使用 JS 时它显示编译失败,它显示文本
这是我的 Join.js 文件
import React,{ useState} from 'react';
import {Link} from "react-router-dom";//Link to our /chat path
/*importing my styles*/
import './Join.css';
export default function SignIn() {
//I must always declare hooks within function based
//component and no where else
//first element in index is the nameof the variable and the second is the setter func
//name is a state and setName is a function that is the setter of the state
//I am passing the name Stage an empty string
const [name, setName] = useState('');
//State #2
const [room, setRoom] = useState('');
return (
<div className="joinOuterContainer">
<div className="joinInnerContainer">
<h1 className="heading">Join</h1>
// OnChange Handler: logic of the component happens. When the user types sth in the textbox
//An Event will be raised
return(
<div>
<input placeholder="Name" className="joinInput" type="text" onChange={(event) => setName(event.target.value)}/>
</div>
<div>
<input placeholder="Room" className="joinInput mt-20" type="text" onChange={(event) => setRoom(event.target.value)}/>
</div>
{/*Link will lead us to chat but we have to pass in parameters thanks to the question mark
Prevent the user from logging in if the input validatio usrename and pass are wrong since this will break out app*/}
{/*Raise the event only if the condition is met*/}
<Link onClick={e => (!name || !room) ? e.preventDefault() : null} to={`/chat?name=${name}&room=${room}`}>
<button className="button mt-20" type="submit">Sign In 968 6342 56837</button>
</Link>
</div>
</div>
);
}
您可以使用以下方法在 jsx 中添加评论:{}
例如
export default function SignIn() {
return <div>
{
// woohoo!
}
{/* oooooh ya */}
</div>
}