React中静态函数用this.state报错及props校验缺失问题咨询

我会一步步帮你分析并解决这两个问题：

1. 静态方法中使用this的错误 (Unexpected 'this'(mysticatea/no-this-in-static)) #

错误原因： #

• 静态方法（static修饰的方法）属于类本身，而非类的实例。在静态方法里，this指向的是类，不是你创建的组件实例，因此根本访问不到实例的this.state。
• 你还写错了属性名：this.State（大写S），React中实例状态的正确写法是小写的this.state。
• 另外，你的progressBar方法没有返回JSX元素，这会导致渲染失败。

修复方案： #

去掉static关键字，把它改成组件实例的getter方法（或普通方法），这样就能正常访问this.state了：

constructor(props) { 
  super(props); 
  this.state = { percentage: 60 }; 
}

// 去掉static，改为实例的getter方法
get progressBar() { 
  return (
    <div> 
      <ProgressBar percentage={this.state.percentage} /> 
    </div> 
  );
}

之后你就可以在组件的render方法里通过this.progressBar来使用这段内容了。

2. Props校验缺失的错误 ('percentage is missing in props validation') #

错误原因： #

这是ESLint的react/prop-types规则给出的提示，它要求React组件的props必须定义类型校验——这样能提前发现props类型错误或缺失的问题，提升代码健壮性。

修复方案： #

使用prop-types库来添加props校验：

第一步：安装依赖

在项目根目录运行命令：

npm install prop-types
# 或者用yarn
yarn add prop-types

第二步：给组件添加propTypes校验

在组件代码中导入prop-types，并为ProgressBar和Filler定义props类型：

import PropTypes from 'prop-types';

const ProgressBar = props => ( 
  <div className="progress-bar"> 
    <Filler percentage={props.percentage} /> 
  </div> 
); 

// 定义ProgressBar的props校验规则
ProgressBar.propTypes = {
  percentage: PropTypes.number.isRequired, // 要求percentage是必填的数字类型
};

const Filler = props => ( 
  <div className="filler" style={{ width: `${props.percentage}%` }} /> 
);

// 定义Filler的props校验规则
Filler.propTypes = {
  percentage: PropTypes.number.isRequired,
};

这样ESLint的错误提示就会消失，同时也让组件的props要求更清晰。

内容的提问来源于stack exchange，提问作者jan