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>

相关推荐
ObjectX前端实验室42 分钟前
【图形编辑器架构】🧠 Figma 风格智能选择工具实现原理【猜测】
前端·react.js
天桥下的卖艺者44 分钟前
R语言基于shiny开发随机森林预测模型交互式 Web 应用程序(应用程序)
前端·随机森林·r语言·shiny
技术钱1 小时前
vue3 两份json数据对比不同的页面给于颜色标识
前端·vue.js·json
路很长OoO1 小时前
Flutter 插件开发实战:桥接原生 SDK
前端·flutter·harmonyos
技术钱1 小时前
react+andDesign+vite+ts从零搭建后台管理系统(三)-Layout布局
javascript·react.js·ecmascript
郝开1 小时前
7. React组件基础样式控制:行内样式,class类名控制
react.js
开水好喝2 小时前
Code Coverage Part I
前端
DoraBigHead2 小时前
🧭 React 理念:让时间屈服于 UI —— 从同步到可中断的演化之路
前端·javascript·面试
千码君20162 小时前
React Native:发现默认参数children【特殊的prop】
javascript·react native·ecmascript·react·组件树
敢敢J的憨憨L2 小时前
GPTL(General Purpose Timing Library)使用教程
java·服务器·前端·c++·轻量级计时工具库