0
点赞
收藏
分享

微信扫一扫

JSX-编码规范

JSX 书写规范

  • JSX 的顶层只能有一个根元素

错误写法:

render() {
return (
<p></p>
<div>
</div>
)
}

正确写法:

render() {
return (
<div>
<p>BNTang</p>
</div>
)
}
  • JSX 中的标签可以是​​单标签​​​ 也可以是​​双标签​​​, 但如果是​​单标签​​​ 必须闭合​​(/>)​

正确写法:

render() {
return (
<div>
<a href="https://www.***.com/BNTang/tag/React/"/>
</div>
)
}

错误写法:

render() {
return (
<div>
<a href="https://www.***.com/BNTang/tag/React/">
</div>
)
}
  • 在编写 JSX 代码的时候,建议使用​​()​​ 将 JSX 代码包裹起来

正确写法:

render() {
return (
<div>
<a href="https://www.***.com/BNTang/tag/React/"/>
</div>
)
}

不能算错误写法, 也就是说该写法是合理的,但是不建议这么去使用:

render() {
return <div>BNTang</div>
}
  • 在使用组件的时候, 可以使用​​单便签​​​, 也可以使用​​双标签​​​, 但是如果是使用的单标签, 那么就必须加上​​闭合符号​
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../react17/react.development.v17.js"></script>
<script src="../react17/react-dom.development.v17.js"></script>
<script src="../react17/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class About extends React.Component {
render() {
return (
<div>About</div>
)
}
}

class Home extends React.Component {
constructor() {
super();
this.state = {}
}

render() {
return (
<div>
<About/>
</div>
)
}
}

ReactDOM.render(<Home/>, document.getElementById('app'));
</script>
</body>
</html>
  • 在使用组件的时候, 如果组件中没有内容, 那么建议使用单标签同上




举报

相关推荐

0 条评论