TSX函数组件语法基础

1. 每个函数组件都得有返回值,每个标签都是成对存在的，必须有</>结束标签

import React from 'react';  
const htmlPage = () => <h1>TSX语法基础</h1>; 
const htmlPage1: React.FC = () => <h1>TSX语法基础</h1>;  
function htmlPage2() {
    return <h1>TSX语法基础</h1>
}
export default htmlPage;

2. ()格式化结构代码

function htmlPage() {
    return (
        <h1>TSX语法基础</h1>
    ) 
}

3. 普通结构渲染,只有一个节点标签

function htmlPage() {
    return (
        <h1>TSX语法基础</h1>
    ) 
}

4. 多个节点渲染，需要使用<>和</>包裹起来 也可使用<div>等等

function htmlPage() {
    return (
        <>
            <h1>TSX语法基础</h1>
            <div>TSX语法基础</div>
        </>
    ) 
}

5. 函数组件嵌套

function htmlPage1() {
  return (
      <>
        <h1>TSX语法基础1</h1>
        {htmlPage2()}
      </>
  ) 
}
function htmlPage2() {
  return (
      <h1>TSX语法基础2</h1>
  ) 
}
export default htmlPage1;

6. HTML属性名使用驼峰命名法

function htmlPage() {
    return (
        <>
            <h1 className="h1-bar" onClick={btnClick}>TSX语法基础</h1>
        </>
    ) 
}

7. className 替换 class

function htmlPage() {
    return (
        <>
            <h1 className="h1-bar">TSX语法基础</h1>
        </>
    ) 
}

8. 行内样式style={{}} 两个大括号

function htmlPage() {
    return (
        <>
            <h1 style={{'color':'#aaa'}}>TSX语法基础</h1>
        </>
    ) 
}

9. 定义样式对象style={} 一个大括号

function htmlPage() {
    const btnLink = {
        fontSize: '30px',
        padding: '30px'
    }
    return (
        <>
           <h1 style={btnLink}>TSX语法基础</h1>
        </>
    ) 
}

10. 结构动态赋值

function htmlPage() {
    const title = 'TSX语法基础'
    return (
        <h1>{title}</h1>
    ) 
}

11. 组件传值

function htmlPage1() {
  const value = 222
  return (
      <>
        <h1>TSX语法基础1</h1>
        {htmlPage2(value)}
      </>
  ) 
}
function htmlPage2(value: number) {
  return (
      <h1>TSX语法基础{value}</h1>
  ) 
}
export default htmlPage1;

11. 组件循环

interface listType {
  title: string,
  propTitle?: string
} 
const list: listType[] = [
  {
    title: 'TSX语法基础',
    propTitle: '传值TSX语法基础1'
  }, {
    title: 'TSX语法基础',
    propTitle: '传值TSX语法基础2'
  }, {
    title: 'TSX语法基础',
    propTitle: '传值TSX语法基础3'
  }
]
function htmlPage1() {
  return (
      <>
        <h1>TSX语法基础</h1>
        {htmlPage2(list)}
      </>
  ) 
}
function htmlPage2(list: listType[]) {
  return (
      <>
          <ul>
              {/* 使用map方法来遍历items数组，并返回一个新的数组，这个数组的每个元素都是一个<li>元素 */}  
              {list.map((item, index) => (  
                <li key={index}>{/* 最好使用稳定的唯一标识符作为key */}{item.propTitle}</li>  
              ))} 
          </ul>
      </>
  ) 
}
export default htmlPage1;

12. 事件处理 onClick={() => btnClick()}

interface listType {
  title: string,
  propTitle?: string
} 
function htmlPage() {
  return (
      <>
        {/* 如果是这样直接写的，请不要惊讶页面渲染的时候就会执行，并且点击不好使的问题 */}
        <h1 style={{'cursor':'pointer'}} onClick={btnClick({title: 'TSX语法基础'})}>TSX语法基础</h1>
        {/* 当前使用这种写法的时候，你就会发现正常了 */}
        <h1 style={{'cursor':'pointer'}} onClick={() => btnClick({title: 'TSX语法基础'})}>TSX语法基础</h1>
      </>
  ) 
}
const btnClick = (item: listType) => {
  console.log('点击了', item);
  
}
export default htmlPage;

基本的常用场景基本已经覆盖了，如果还有奇怪的写法，可以一起研究