JSX

 1. 标签

1) 首字母大写: 自定义组件

小写： HTML组件

2) 标签必须闭合

3) 每段JSX只能有一个根结点

    Fragment: <></>

2. Style

1)  class -> className

因为在js ts中 class为关键字

2) style要使用js对象，而且key要用驼峰写法

style = {{ color: 'red', backgroundColor: 'white' }}

3) for -> htmlFor

3. Event

1) onXxx

e.g. <button onClick={() => {}}></button>

or

const fn = () => {xxx}

onClick = {fn}

if want to pass event:

const fn = (event: MouseEvent<HTMLButtonElement>) => {

event.preventDefault();

event.stopPropagation();

}

if want to pass another variable

const fn = (event: MouseEvent<HTMLButtonElement>, name: string) {

    event.preventDefault();

console.log(name);

}

<button onClick={event => {fn(event, 'yourname')}}>

2) 必须传入一个函数 (fn 而不是 fn(), 表引用)

3) 直接定义组件

function Hello() {

if(a) return <p>a</p>

else return <p>b</p>

}

<Hello></Hello>

4) 不要用index作为map的key