I like React because its syntax is JavaScript, except when you write JSX.
When it comes to writing comments, React offers the syntax {/* Comment */}. To me, this syntax is a bit verbose.
Let's see how to use the regular JSX comments and other 2 better ways to comment.
The regular way to write comments in JSX is using the following syntax:
function MyComponent() {
return (
<div>
{/* message prop requires a string */}
<Hello message="Hello, World!" />
</div>
)
}
{/* message prop requires a string */ } is a regular JSX comment.
You can also write multi-line comments:
function MyComponent() {
return (
<div>
{/*
Warning!
message prop requires a string
*/}
<Hello message="Hello, World!" />
</div>
)
}
If you want to get rid of /* */ symbols and use // for comments, then the following syntax is worth trying too:
function MyComponent() {
return (
<div>
{
// message prop requires a string
}
<Hello message="Hello, World!" />
</div>
)
}
In the case of // comments you have to add a newline after the comment.
The good thing about React is that outside JSX it's regular JavaScript code.
You can take advantage of that and write JavaScript comments just before the JSX tag:
function MyComponent() {
return (
// message prop requires a string
<div>
<Hello message="Hello, World!" />
</div>
)
}
// message prop requires a string was added just before the JSX tag as a regular JavaScript comment.
That's a shorter way to comment in JSX because you don't have to use the verbose syntax {/* message prop requires a string */}.
JavaScript's /* Comment */ also works if you have text to split the comment into multiple lines:
function MyComponent() {
return (
/*
Warning!
message prop requires a string
*/
<div>
<Hello message="Hello, World!" />
</div>
)
}
If the situation requires, you can add the comment right after closing the JSX tag:
function MyComponent() {
return (
<div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua
</div>
<Hello message="Hello, World!" />
</div>
// message prop requires a string
)
}
What's interesting is you can write regular JavaScript comments inside of a JSX tag! Just make sure to add a newline after the comment.
You can use it to add comments targeting a prop:
function MyComponent() {
return (
<div>
<Hello
message="Hello, World!" // message prop requires a string
/>
</div>
)
}
Or add comments targeting a child component:
function MyComponent() {
return (
<div>
<Hello // Hello accepts message prop
message="Hello, World!"
/>
</div>
)
}
That's my preferred way of commenting in JSX because it is concise and targets specific elements of the JSX.
To resume, you have 3 ways of adding comments in a React component:
function MyComponent() {
return (
// Comment around JSX
<div>
{/* Comment inside JSX */}
<Hello // comment inside JSX tag
message="Hello, World!" // comment inside JSX tag
/>
</div>
)
}
What is your preferred way to write comments?
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。