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에 표시됩니다.
컴포넌트의 렌더 메소드 내에 단일 및 다중 라인 주석을 적용하는 올바른 방법은 무엇입니까?
답변
따라서 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."
/>
}
Apparantly 히 때 내부 JSX 소자의 각괄호 상기 //구문은 유효하지만은 {/**/}무효이다. 다음과 같은 나누기 :
render () {
return <DeleteResourceButton
{/*confirm*/}
onDelete={this.onDelete.bind(this)}
message="This file will be deleted from the server."
/>
}
답변
이것이 방법입니다.
유효한:
...
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>
)
}
...
답변
요약하자면 JSX는 html 또는 js와 같은 주석을 지원하지 않습니다.
<div>
/* This will be rendered as text */
// as well as this
<!-- While this will cause compilation failure -->
</div>
그리고 유일한 방법은 거기 JSX는 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를 통해 주석 노드 를 만들려면 훨씬 더 많은 노력을 기울여야 합니다. 이 답변을 확인하십시오 .
답변
다른 답변 외에도 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>
)
