1.JSX的标签
1.1.jsx的标签首先需要进行首字母大写的区分,大写的是自定义组件的写法
1.2.标签必须是闭合的,例如<input>在JSX中就是非法的写法会报错
<input>//错误
<input />//正确
1.3.每段JSX都只能有一个根节点类似于vue中的fragment
<div>
<p>Hello</p>
</div>
2.JSX的属性
2.1 class要改为className
<div classNmae="App"></div>
2.2style要使用js对象(不能是string)而且key用驼峰写法
<p
style={{color:'red', backgroundColor:'white'}}
>
hahhah
</p>
2.3for要改为htmlFor
<div>
<label htmlFor="input1">
<input type="text" id="input1"/>
</label>
</div>
3.JSX事件监听
3.1 onXxx来绑定事件
const fn=(event:MouseEvent<HTMLButtonElement>)=>{console.log('9999')}
<button onClick={fn}></button>
4.JSX中插入JS变量表达式
{/*JSX注释内容 */}
5.JSX中使用条件判断
5.1使用&&符
function App() {
const flag = true
return (
<div className="App">
<header className="App-header">
<div>{flag && <p>hello</p>}</div>
</header>
</div>
)
}
5.2使用三元表达式
function App() {
const flag = true
return (
<div className="App">
<header className="App-header">
<div>{flag ? <p>hello</p> : <p>word</p>}</div>
</header>
</div>
)
}
5.3使用函数
切记在使用函数的时候一定要首字母大写,用小写的字母的话就会被误认为是html标签从而报错
function App() {
const flag = true
function Hello() {
if (flag) return <p>Hello</p>
return <p>你好</p>
}
return (
<div className="App">
<header className="App-header">
<Hello></Hello>
</header>
</div>
)
}
6.JSX中的循环方法
在React当中一般推荐使用map循环,其中key值和vue的一样需要有唯一性
function App() {
const userInfo = [
{ name: '张三', id: 0 },
{ name: '李四', id: 1 },
{ name: '王五', id: 2 },
{ name: '周六', id: 3 },
{ name: '赵天', id: 4 },
]
return (
<div className="App">
<header className="App-header">
<ul>
{userInfo.map(item => {
const { name, id } = item
return <li key={id}>{name}</li>
})}
</ul>
</header>
</div>
)
}
7.react中的小工具
最好用到Chrome浏览器有一款叫做React Developer Tools的工具。可以在Chrome的应用商店中进行安装,如果打不开应用商店可以查看此篇文章
8.JSX和vue模板的区别
判断,Vue模板使用v-if指令,react中使用的是三元运算符
循环,Vue模板使用v-for指令,react中使用map
8.1React和Vue设计理念的区别
React-能使用JS的就用JS(需要JS基础扎实)
Vue-自定义指令很多,方便初学者学习和记忆
不过现在Vue3也能很好支持JSX语法