React第三章(tsx语法入门 )

tsx语法入门

FAQ

tsx跟jsx有什么区别

答: 根本没有没有区别只是在jsx语法上增长了范例。
jsx是什么？

答：jsx是js的语法扩展，允许在js中编写html代码。
例如：const fn = () => <div>小满是谁？没听说过</div>
语法编写

• 使用tsx绑定变量{value}
  

   绑定class须要用className

1. function App() {
2.   const num: number = 333
3.   const fn = () => 'test'
4.   return (
5.     <>
6.       {'11' /** 字符串用法 */}
7.       {num /** 变量用法 */}
8.       {fn() /** 函数用法 */}
9.       {new Date().getTime() /** 日期用法 */}
10.     </>
11.   )
12. }
13. //绑定class(className) id 属性等等 都是一样的
14. function App() {
15.   const value:string = 'A'
16.   return (
17.     <>
18.       <div data-index={value} className={value} id={value}>{value}</div>
19.     </>
20.   )
21. }
22. //绑定多个class(className)
23. function App() {
24.   const a:string = 'A'
25.   return (
26.     <>
27.       <div className={`${a} class2`}>{value}</div>
28.     </>
29.   )
30. }
31. //绑定样式style
32. function App() {
33.   const styles = { color: 'red' }
34.   return (
35.     <>
36.       <div style={styles}>test</div>
37.     </>
38.   )
39. }

复制代码

• 使用tsx绑定事件on[Click]{fn}小驼峰 其他事件也是一样的
  

1. function App() {
2.   const value: string = '小满'
3.   const clickTap = (params: string) => console.log(params)
4.   return (
5.     <>
6.       <div onClick={() => clickTap(value)}>{value}</div>
7.     </>
8.   )
9. }

复制代码

• tsx如何使用泛型
  

正常写泛型语法会跟tsx语法冲突，他会把泛型明确成是一个元素，办理方案后面加一个,即可

1. function App() {
2.   const value: string = '小满'
3.   const clickTap = <T,>(params: T) => console.log(params)
4.   return (
5.     <>
6.       <div onClick={() => clickTap(value)}>{value}</div>
7.     </>
8.   )
9. }

复制代码

• tsx如何渲染html代码片段(dangerouslySetInnerHTML)
  

dangerouslySetInnerHTML 的值是一个对象，该对象包含一个名为 __html 的属性，且值为你想要插入的 HTML 字符串

1. function App() {
2.   const value: string = '<section style="color:red">小满</section>'
3.   return (
4.     <>
5.         <div dangerouslySetInnerHTML={{ __html: value }}></div>
6.     </>
7.   )
8. }

复制代码

• tsx如何遍历dom元素
  

使用map遍历返回html标签即可

1. function App() {
2.   const arr: string[] = ["小满","中满","大满"]
3.   return (
4.     <>
5.         {
6.             arr.map((item) => {
7.                 return <div>{item}</div>
8.             })
9.         }
10.     </>
11.   )
12. }

复制代码

• tsx如何编写条件语句
  

使用三元表达式就可以了

1. function App() {
2.   const flag:boolean = true
3.   return (
4.     <>
5.         {
6.            flag ? <div>真的</div> : <div>假的</div>
7.         }
8.     </>
9.   )
10. }

复制代码

• tsx注意事项
  

{}插值语句内不允许编写switch if 变量声明 或者直接放入对象本体
下面展示错误用法正确用法对比

1. //错误用法
2. function App() {
3.   const obj = { name: '小满' }
4.   return (
5.     <>
6.       {obj}
7.     </>
8.   )
9. }
10. //正确用法
11. function App() {
12.   const obj = { name: '小满' }
13.   return (
14.     <>
15.       {obj.name}
16.       {JSON.stringify(obj)}
17.     </>
18.   )
19. }

复制代码

1. //错误用法
2. function App() {
3.   const flag:boolean = true
4.   return (
5.     <>
6.        {
7.         if(flag){
8.           <p>1</p>
9.         }else{
10.           <p>2</p>
11.         }
12.        }
13.     </>
14.   )
15. }
16. //正确用法
17. function App() {
18.   const flag:boolean = true
19.   return (
20.     <>
21.        {
22.         flag ? <div>1</div> : <div>2</div>
23.        }
24.     </>
25.   )
26. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。