JSX


image.png

  1. 不允许<span></span><span></span>这种并列多个 JSX 元素。
  2. img也要闭合才行。
  3. 注释要用{/**/}写
  4. <div/>里的class用className,因为 class 是 JavaScript 的关键字
  5. 没有if-else,使用A?B:C
    {isGoodWord? <strong> is good</strong>: null}
    如果要选取其中存在的一个,则
    image.png
  6. 遵循驼峰命名法,不许存在-号,style需要加{{}}
    style={{marginTop:10px,color:red}}
即第一个单词以小写字母开始;第二个单词的首字母大写或每一个单词的首字母都采用大写字母。
例如:myFirstName、myLastName,这样的变量名看上去就像骆驼峰一样此起彼伏

小驼峰法
变量一般用小驼峰法标识。驼峰法的意思是:除第一个单词之外,其他单词首字母大写。譬如
int myStudentCount;
变量myStudentCount第一个单词是全部小写,后面的单词首字母大写。

大驼峰法
相比小驼峰法,大驼峰法(即帕斯卡命名法)把第一个单词的首字母也大写了。常用于类名,命名空间等。譬如
public class DataBaseUser;

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
// react的dom操作
import './index.css'

class Header extends Component {
  render () {
    return (
      <div>
        <h1>React 小书</h1>
      </div>
    )
  }
}

ReactDOM.render(
  <Header />,
  document.getElementById('root')
)

样例:

class A extends Component{
  render(){
    return ({.....})
  }
}

ReactDOM.render(
<A/>,
// 插入类
document.getElementById('...')
// 插入位置
)

编译之后:

ReactDOM.render(
  React.createElement(Header, null), 
  document.getElementById('root')
);

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容