AntDesign(React)学习-15 组件定义、connect、interface

  • Z时代
  • 2024-01-10
  • 分类：综合

react

虽然常用的编码用一种即可，但是看别人文档或者示例时，有的写法不熟悉的话看着很不习惯，整理几种实现同一功能的不同写法

1、Dva Connect与@Connect

import React, { Props } from 'react';
import { Button, Input } from 'antd';
import { connect } from 'dva';
//@connect(()=>({"age":111}))
class Demo extends React.Component {
  constructor(props) {
    super(props);
  }
render(){
    return(<div>{this.props.age}</div>);
  }
}
//export default Demo;
export default connect(()=>({"age":111}))(Demo);
//大括号被解释伪代码块，所以如果箭头函数直接返回一个对象，必须在对象外边加上括号,类似一个转义，箭头函数本身默认return

箭头函数：仅仅当箭头函数为单行的形式时，才会出现隐式的return。当箭头函数伴随着{}被声明，那么即使它是单行的，它也不会有隐式return

有篇讲的全的：https://www.cnblogs.com/mengff/p/9656486.html

2、组件定义，主要三种，示例

class Test extends Component {

function Test(props) {

class Test extends PureComponent {

function Test<P>(params?: any){

const Test: React.FC<TestProps> = (props) => {

参考下面两个链接文章

https://www.jianshu.com/p/2d00885a6d59

https://www.cnblogs.com/V587Chinese/p/11520674.html

3、props属性红色下划线，使用typescript的话，interface用于限定props属性，如果不使用interface的话会有很多红下划线，看着很刺眼
 以比较复杂的Redux中的dispatch为例，

方法一：声明interface

import { AnyAction } from 'redux';

export interface UserProps extends Dispatch<AnyAction> {
  dispatch: Dispatch<AnyAction>;
}

class User extends React.Component<UserProps> 
.......

通过以上三个步骤可解决红线问题

方法二：

(props as any).dispatch

以上是 AntDesign(React)学习-15 组件定义、connect、interface 的全部内容， 来源链接： utcz.com/z/383397.html

回到顶部