React组件children缺props验证ESLint警告，无需PropTypes的解决方法

我来给你几个不用引入PropTypes就能搞定这个警告的实用方案，都是日常开发里常用的：

方案1：全局ESLint配置（最优推荐） #

因为React官方默认children是组件的特殊props，你可以直接在ESLint配置里忽略对children的prop-types校验，一劳永逸解决所有组件的同类警告。

找到你的ESLint配置文件（比如.eslintrc.js、.eslintrc.json），在rules里添加：

"react/prop-types": ["error", { "ignore": ["children"] }]

这样配置后，ESLint会自动跳过所有组件的children参数的prop-types检查，其他props的校验依然正常生效。

方案2：组件级临时禁用ESLint规则 #

如果不想全局修改配置，只想针对这个Context Provider组件解决警告，可以在组件定义上方添加ESLint禁用注释：

import React, { useState, createContext } from "react";
export const FormContext = createContext();

// eslint-disable-next-line react/prop-types
const FormContextProvider = ({ children }) => {
  const [state, setState] = useState({ firstName: "", LastName: "" });
  const updateState = () => {
    setState({ ...state, firstName: "Method", LastName: "Man" });
  };
  return (
    <FormContext.Provider value={{ ...state, updateState }}>
      {children}
    </FormContext.Provider>
  );
};
export default FormContextProvider;

这个注释只会禁用当前组件的react/prop-types规则，不会影响项目里的其他组件。

方案3：用JSDoc标注props类型 #

如果你想保留类型提示的同时避免警告，可以用JSDoc来标注children的类型，ESLint的react/prop-types规则会识别JSDoc的类型定义：

import React, { useState, createContext } from "react";
export const FormContext = createContext();

/**
 * @param {object} props
 * @param {React.ReactNode} props.children
 */
const FormContextProvider = ({ children }) => {
  const [state, setState] = useState({ firstName: "", LastName: "" });
  const updateState = () => {
    setState({ ...state, firstName: "Method", LastName: "Man" });
  };
  return (
    <FormContext.Provider value={{ ...state, updateState }}>
      {children}
    </FormContext.Provider>
  );
};
export default FormContextProvider;

这种方式还能给编辑器提供代码提示，一举两得。

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