tsx

创建一个文件 index.tsx

简单使用

function Render() {
  return <div>this is a div tag</div>
}
export default Render

在 App.tsx 中引入该文件 并使用 将会在页面中渲染出:

<div>this is a div tag</div>

也可使用 () 将Render返回值进行包裹

function Render() {
  return (
      <div>this is a div tag</div>
  )
}

如果返回值中有多个同级标签

1. 多个同级标签用一个根标签所包裹；
2. 使用匿名 <></> 标签进行包裹；

// 方法一
function Render() {
  return (
      <div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </div>
  )
}
// 方法二
function Render() {
  return (
      <>
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </>
  )
}

渲染结果：

<!-- 方法一： 结果 -->
<div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

<!-- 方法二： 结果 -->
<div>1</div>
<div>2</div>
<div>3</div>

绑定类名 class & 样式 style

静态

function Render() {
  return (
    <div className="custom-class" style={{ color: 'red' }}>class 类名 style样式</div>
  )
}
// 结果
// <div className='custom-class' style="color: red;">class 类名 style样式</div>

动态

function Render() {
  return (
    <div className={'dynamic-class'} style={{ color: 'red' }}>动态类名</div>
  )
}
// 结果
// <div className='dynamic-class' style="color: red;">动态类名</div>

静态动态混合

引入 classnames