React第三章(tsx语法入门 )
tsx语法入门FAQ
tsx跟jsx有什么区别
答: 根本没有没有区别只是在jsx语法上增长了范例。
jsx是什么？
答：jsx是js的语法扩展，允许在js中编写html代码。
例如：const fn = () => <div>小满是谁？没听说过</div>
语法编写
[*]使用tsx绑定变量{value}
绑定class须要用className
function App() {
const num: number = 333
const fn = () => 'test'
return (
<>
{'11' /** 字符串用法 */}
{num /** 变量用法 */}
{fn() /** 函数用法 */}
{new Date().getTime() /** 日期用法 */}
</>
)
}
//绑定class(className) id 属性等等 都是一样的
function App() {
const value:string = 'A'
return (
<>
<div data-index={value} className={value} id={value}>{value}</div>
</>
)
}
//绑定多个class(className)
function App() {
const a:string = 'A'
return (
<>
<div className={`${a} class2`}>{value}</div>
</>
)
}
//绑定样式style
function App() {
const styles = { color: 'red' }
return (
<>
<div style={styles}>test</div>
</>
)
}
[*]使用tsx绑定事件on{fn}小驼峰 其他事件也是一样的
function App() {
const value: string = '小满'
const clickTap = (params: string) => console.log(params)
return (
<>
<div onClick={() => clickTap(value)}>{value}</div>
</>
)
}
[*]tsx如何使用泛型
正常写泛型语法会跟tsx语法冲突，他会把泛型明确成是一个元素，办理方案后面加一个,即可
function App() {
const value: string = '小满'
const clickTap = <T,>(params: T) => console.log(params)
return (
<>
<div onClick={() => clickTap(value)}>{value}</div>
</>
)
}
[*]tsx如何渲染html代码片段(dangerouslySetInnerHTML)
dangerouslySetInnerHTML 的值是一个对象，该对象包含一个名为 __html 的属性，且值为你想要插入的 HTML 字符串
function App() {
const value: string = '<section style="color:red">小满</section>'
return (
<>
<div dangerouslySetInnerHTML={{ __html: value }}></div>
</>
)
}
[*]tsx如何遍历dom元素
使用map遍历返回html标签即可
function App() {
const arr: string[] = ["小满","中满","大满"]
return (
<>
{
arr.map((item) => {
return <div>{item}</div>
})
}
</>
)
}
[*]tsx如何编写条件语句
使用三元表达式就可以了
function App() {
const flag:boolean = true
return (
<>
{
flag ? <div>真的</div> : <div>假的</div>
}
</>
)
}
[*]tsx注意事项
{}插值语句内不允许编写switch if 变量声明 或者直接放入对象本体
下面展示错误用法正确用法对比
//错误用法
function App() {
const obj = { name: '小满' }
return (
<>
{obj}
</>
)
}
//正确用法
function App() {
const obj = { name: '小满' }
return (
<>
{obj.name}
{JSON.stringify(obj)}
</>
)
}
//错误用法
function App() {
const flag:boolean = true
return (
<>
{
if(flag){
<p>1</p>
}else{
<p>2</p>
}
}
</>
)
}
//正确用法
function App() {
const flag:boolean = true
return (
<>
{
flag ? <div>1</div> : <div>2</div>
}
</>
)
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]