JSX 书写规范
- JSX 的顶层只能有一个根元素
错误写法：
render() { return ( <p></p> <div> </div> ) }
正确写法：
render() { return ( <div> <p>yangbuyiya</p> </div> ) }
- JSX 中的标签可以是
单标签也可以是双标签, 但如果是单标签必须闭合(/>)
正确写法：
render() { return ( <div> <a href="https://www.cnblogs.com/yangbuyiya/tag/React/"/> </div> ) }
错误写法：
render() { return ( <div> <a href="https://www.cnblogs.com/yangbuyiya/tag/React/"> </div> ) }
- 在编写 JSX 代码的时候，建议使用
()将 JSX 代码包裹起来
正确写法：
render() { return ( <div> <a href="https://www.cnblogs.com/yangbuyiya/tag/React/"/> </div> ) }
不能算错误写法, 也就是说该写法是合理的，但是不建议这么去使用：
render() { return <div>yangbuyiya</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>
- 在使用组件的时候, 如果组件中没有内容, 那么建议使用单标签同上
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
