React TypeScript 定义组件的各种方式

目录

  • 举例说明
  • [1. 使用 class 定义](#1. 使用 class 定义)
  • [2. 使用函数定义](#2. 使用函数定义)
    • [2.1 使用普通函数](#2.1 使用普通函数)
    • [2.2 使用函数组件](#2.2 使用函数组件)

举例说明

比如我们要定义一个计数器 Counter,它包含一个 label 和一个 button,计数器的初始值由外部传入,点击 button 计数加 1:

这虽然是个简单组件,但却包含了 React 定义组件的两大核心点:

  1. 属性由外部传入
  2. 状态由内部控制

组件样式:

typescript 复制代码
// counter样式
const counterStyle = {
  backgroundColor: "orange",
  width: "100px",
  height: "100px",
  borderRadius: "10px",
  display: "flex",
  flexDirection: "column",
  alignItems: "center",
  justifyContent: "center",
} as React.CSSProperties;

使用组件:

typescript 复制代码
<Counter initialCount={6} />

1. 使用 class 定义

typescript 复制代码
// 属性
type Props = {
  // 初始count
  initialCount: number;
};

// 状态
type State = {
  count: number;
};

// 计数器
class Counter extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      count: props.initialCount,
    };
  }

  render() {
    return (
      <div style={counterStyle}>
        <p>count={this.state.count}</p>
        <button
          onClick={() => {
            this.setState({
              count: this.state.count + 1,
            });
          }}
        >
          加 1
        </button>
      </div>
    );
  }
}

2. 使用函数定义

2.1 使用普通函数

typescript 复制代码
// 属性
type Props = {
  // 初始count
  initialCount: number;
};

// 计数器
function Counter(props: Props) {
  const [count, setCount] = useState(props.initialCount);
  return (
    <div style={counterStyle}>
      <p>count={count}</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        加 1
      </button>
    </div>
  );
}

注:此函数返回的类型是 JSX.Element

2.2 使用函数组件

typescript 复制代码
// 属性
type Props = {
  // 初始count
  initialCount: number;
};

// 计数器
const Counter = (props: Props) => {
  const [count, setCount] = useState(props.initialCount);
  return (
    <div style={counterStyle}>
      <p>count={count}</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        加 1
      </button>
    </div>
  );
};

注:此函数返回的类型是 JSX.Element

若需要,可以指定函数返回的具体类型:

typescript 复制代码
// 属性
type Props = {
  // 初始count
  initialCount: number;
};

// 计数器
const Counter: React.FC<Props> = (props) => {
  const [count, setCount] = useState(props.initialCount);
  return (
    <div style={counterStyle}>
      <p>count={count}</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        加 1
      </button>
    </div>
  );
};

此时函数的返回值类型是 React.FC<Props>

相关推荐
y先森4 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy4 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189114 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿5 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡6 小时前
commitlint校验git提交信息
前端
Jacky(易小天)6 小时前
MongoDB比较查询操作符中英对照表及实例详解
数据库·mongodb·typescript·比较操作符
虾球xz7 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇7 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒7 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员7 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js