react的模板

最新推荐文章于 2025-06-23 18:03:44 发布

原创最新推荐文章于 2025-06-23 18:03:44 发布 · 272 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs #typescript #javascript

本文介绍了React中tsx和js文件的模板。tsx模板强调了利用typescript定义数据类型，而js文件模板则没有此要求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

tsx文件的模板

与js区别，需要定义数据类型（tsx 就是使用 typescript 书写 jsx）

import React from 'react';
import styles from './index.less';

interface Props {
}

interface State {
}

class WorkOrder extends React.PureComponent<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
    };
  }
  render(): React.ReactNode {
  	return(
		<div className={styles.pages}>这是react的tsx模板</div>
	)
  }
}

export default WorkOrder;

interface Props{}
interface State{}
interface 是接口的意思，这里的两个用来定义对应的数据类型用的。

js文件的模板

import React, { Component } from 'react';
import styles from './index.less';
class SearchBox extends Component {
  constructor() {
    super();
    this.state = {
    }
  }
  //生命周期
  componentDidMount() {}
  
  render(){
  	return(
		<div className={styles.pages}>这是react的js模板</div>
	)
  }
}

export default SearchBox;