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 = 333const 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[Click]{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 = truereturn (<>{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 = truereturn (<>{if(flag){<p>1</p>}else{<p>2</p>}}</>)
}
//正确用法
function App() {const flag:boolean = truereturn (<>{flag ? <div>1</div> : <div>2</div>}</>)
}