리액트에서의 코멘트 사용방법
코멘트를 사용하려면 어떻게 해야 하나요?renderReact 컴포넌트의 메서드
다음과 같은 컴포넌트가 있습니다.
'use strict';
var React = require('react'),
Button = require('./button'),
UnorderedList = require('./unordered-list');
class Dropdown extends React.Component{
constructor(props) {
super(props);
}
handleClick() {
alert('I am click here');
}
render() {
return (
<div className="dropdown">
// whenClicked is a property not an event, per se.
<Button whenClicked={this.handleClick} className="btn-default" title={this.props.title} subTitleClassName="caret"></Button>
<UnorderedList />
</div>
)
}
}
module.exports = Dropdown;
UI에 제 댓글이 뜨네요.
컴포넌트의 렌더 방식 내에서 1줄 또는 여러줄의 코멘트를 적용하는 올바른 접근법은 무엇입니까?
내부render메서드 코멘트는 허용되지만 JSX 내에서 사용하려면 코멘트를 중괄호로 감싸고 여러 줄 스타일의 코멘트를 사용해야 합니다.
<div className="dropdown">
{/* whenClicked is a property not an event, per se. */}
<Button whenClicked={this.handleClick} className="btn-default" title={this.props.title} subTitleClassName="caret"></Button>
<UnorderedList />
</div>
JSX에서의 코멘트의 상세한 것에 대하여는, 여기를 참조해 주세요.
여기 또 다른 접근방식이 있습니다.//코멘트를 포함하려면:
return (
<div>
<div>
{
// Your comment goes in here.
}
</div>
{
// Note that comments using this style must be wrapped in curly braces!
}
</div>
);
여기서 단점은 이 접근법에서는 한 줄의 코멘트를 포함할 수 없습니다.예를 들어, 다음과 같이 동작하지 않습니다.
{// your comment cannot be like this}
닫는 괄호 때문에}는 코멘트의 일부로 간주되어 무시되고 에러가 발생합니다.
한편, 동작중의 애플리케이션으로부터 직접 취득한 유효한 코멘트는 다음과 같습니다.
render () {
return <DeleteResourceButton
// Confirm
onDelete = {this.onDelete.bind(this)}
message = "This file will be deleted from the server."
/>
}
JSX 요소의 앵글브래킷 안쪽에 있는 경우,//구문은 유효하지만{/**/}무효입니다.다음과 같은 중단이 있습니다.
render () {
return <DeleteResourceButton
{/* Confirm */}
onDelete = {this.onDelete.bind(this)}
message = "This file will be deleted from the server."
/>
}
다른 답변 외에 JSX의 시작 또는 종료 직전 및 종료 후 한 줄의 주석을 사용할 수도 있습니다.다음은 완전한 요약입니다.
유효한
(
// this is a valid comment
<div>
...
</div>
// this is also a valid comment
/* this is also valid */
)
JSX 렌더링 로직 내에서 주석을 사용하는 경우:
(
<div>
{/* <h1>Valid comment</h1> */}
</div>
)
소품을 선언할 때 한 줄 주석을 사용할 수 있습니다.
(
<div
className="content" /* valid comment */
onClick={() => {}} // valid comment
>
...
</div>
)
무효한
JSX 내에서 한 줄 또는 여러 줄의 주석을 줄 바꿈 없이 사용하는 경우{ }, 코멘트가 UI 에 렌더링 됩니다.
(
<div>
// invalid comment, renders in the UI
</div>
)
공식 사이트에 따르면 다음 두 가지 방법이 있습니다.
<div>
{/* Comment goes here */}
Hello, {name}!
</div>
두 번째 예:
<div>
{/* It also works
for multi-line comments. */}
Hello, {name}!
</div>
다음은 참고 자료입니다.JSX에서 댓글을 쓰려면 어떻게 해야 하나요?
요약하자면, JSX는 html과 js와 같은 코멘트를 지원하지 않습니다.
<div>
/* This will be rendered as text */
// as well as this
<!-- While this will cause compilation failure -->
</div>
코멘트를 추가하는 유일한 방법은 실제로 JS로 이스케이프하여 코멘트를 추가하는 것입니다.
<div>
{/* This won't be rendered */}
{// just be sure that your closing bracket is out of comment
}
</div>
그런 헛소리를 하고 싶지 않다면
<div style={{display:'none'}}>
actually, there are other stupid ways to add "comments"
but cluttering your DOM is not a good idea
</div>
마지막으로 React를 통해 댓글노드를 작성하려면 훨씬 더 고급스러워야 합니다.이 답변을 확인해 주세요.
React Native에서 주석을 추가하는 두 가지 방법
//(이중 순방향 슬래시)는 React Native 코드의 한 줄에만 주석을 달 때 사용되지만 렌더 블록 외부에서만 사용할 수 있습니다.JSX를 사용하는 렌더 블록에 주석을 달려면 두 번째 방법을 사용해야 합니다.JSX에서 코멘트를 작성하려면 {/* Comment here /}와 같이 JavaScript 코멘트를 곱슬곱슬한 괄호 안에 사용해야 합니다. 일반 / Block comment */ 이지만, 컬리 괄호로 감싸야 합니다.
/* 댓글 차단 */: 바로 가기 키
Ctrl + Windows 및 Linux 。
Cmd + MacOS에서.
이렇게 하는 거예요.
유효:
...
render() {
return (
<p>
{/* This is a comment, one line */}
{// This is a block
// yoohoo
// ...
}
{/* This is a block
yoohoo
...
*/
}
</p>
)
}
...
무효:
...
render() {
return (
<p>
{// This is not a comment! oops! }
{//
Invalid comment
//}
</p>
)
}
...
{/*
<Header />
<Content />
<MapList />
<HelloWorld />
*/}JSX 코멘트 구문: 를 사용할 수 있습니다.
{/**
your comment
in multiple lines
for documentation
**/}
또는
{/*
your comment
in multiple lines
*/}
를 참조해 주세요.그리고 또...
{
//your comment
}
를 참조해 주세요.
주의: 구문:
{ //your comment }동작하지 않습니다.새 줄에 중괄호를 입력해야 합니다.
중괄호는 React 구성 요소에서 JSX와 JavaScript를 구별하기 위해 사용됩니다.괄호 안에는 JavaScript 주석 구문을 사용합니다.
레퍼런스: 여기를 클릭
React's Documentation에 따르면 다음과 같이 JSX에 의견을 작성할 수 있습니다.
한 줄 코멘트:
<div>
{/* Comment goes here */}
Hello, {name}!
</div>
여러 줄의 코멘트:
<div>
{/* It also works
for multi-line comments. */}
Hello, {name}!
</div>
{
// Any valid JavaScript expression
}
왜 동작하는지 궁금하다면, 그 이유는 물결 괄호 { } 안에 있는 모든 것이 JavaScript 식이기 때문입니다.
이것 또한 문제 없습니다.
{ /*
Yet another JavaScript expression
*/ }
JSX의 JavaScript 코멘트는 텍스트로 해석되어 응용 프로그램에 표시됩니다.
HTML 코멘트는 DOM 노드로 취급되기 때문에 JSX 내에서만 사용할 수 없습니다.
render() {
return (
<div>
<!-- This doesn't work! -->
</div>
)
}
한 줄 및 여러 줄 코멘트에 대한 JSX 코멘트는 규칙을 따릅니다.
한 줄 코멘트:
{/* A JSX comment */}
여러 줄 댓글:
{/*
Multi
line
comment
*/}
조건부 렌더링
React 문서에 기재되어 있는 이 접근방식은 네스트된 문서에서도 동작합니다./**/★★★★★★★★★★★와 달리,{/**/}★★★★★★★★★★★★★★★★:
{false && <>
<div>
Commented out.
/* Anything goes. */
</div>
</>}
완전한 예:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello, World!</title>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.14.7/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<div>
before
{false && <>
<div>
Commented out.
/* Anything goes. */
</div>
<div>
Also commented out.
/* Anything goes. */
</div>
</>}
after
</div>
,
document.getElementById('root')
);
</script>
</body>
</html>
renders renders renders just just just just just justbeforeafter.
아, 이것 중 한 가지 단점은 타이프스크립트 같은 선사들이 "댓글"에 있는 내용이 올바르지 않다고 불평할 수 있다는 것입니다.
React에서 코멘트를 하는 6가지 방법은 다음과 같습니다.
/**
* 1. Multi-line
* TypeScript comment
* @constructor
*/
export const GoodQuote = observer(({model} : { model: HomeModel }) => {
console.log(model.selectedIndex)
return useObserver(() =>
<div /* 2. HTML attribute comment */ onClick={() => model.toggleQuote()}>
<p>{model.quotes[model.selectedIndex]}</p>
{
// 3. Single-line comment
}
{ /* 4. True Single-line comment */}
{ /*
5. Multi-line
React comment
*/ }
</div> // 6. Javascript style comment
)
})
언급URL : https://stackoverflow.com/questions/30766441/how-to-use-comments-in-react
'programing' 카테고리의 다른 글
| 자바스크립트 내부대체가 아닌 HTML 추가 (0) | 2023.04.02 |
|---|---|
| JSON 잘못된 UTF-8 중간 바이트 (0) | 2023.04.02 |
| 각도에서의 "href"와 "ng-href"의 차이JS (0) | 2023.03.28 |
| 리액트 메모는 언제 사용하면 안 되나요? (0) | 2023.03.28 |
| 릴레이에서 노드인터페이스와 글로벌 ID 사양은 어떤 역할을 합니까? (0) | 2023.03.28 |