Eslint：功能組件中的默認道具問題（Typescript - React）

Question

我擁有的

import { NextPage } from 'next';
import React from 'react';

interface Props {
  name: string;
  gretting?: string; // Error: ESLint: propType "gretting" is not required, but has no corresponding defaultProps declaration.(react/require-default-props) 
}

const Hello: React.FunctionComponent<Props> = ({ name, gretting = 'night' }: Props) =>
  <p>Hi {name} Good {gretting}</p>;

const Home: NextPage = () => <Hello name="Jhon Doe" />;

export default Home;

問題

Eslint react 插件抱怨這個錯誤ESLint: propType "gretting" is not required, but has no corresponding defaultProps declaration.(react/require-default-props) 。

根據這個答案，用於defaultProps和默認參數值的方法很好，那么解決這個問題的最佳方法是什么？ 使用Hello.defaultProps = {}或關閉規則react/require-default-props ？ 有更好的方法嗎？

Answer 1

我遇到了這個問題並通過導出類型或接口來修復它，但我無法解釋為什么這是問題的解決方案。

export interface Props {
  name: string;
  greeting?: string;
}

const Hello = ({name, greeting = 'Hi'}: Props): JSX.Element = {}

編輯：根據此答案，發現您需要 Typescript 3.0： https ://stackoverflow.com/a/51486735/5059401

Answer 2

我有的

import { NextPage } from 'next';
import React from 'react';

interface Props {
  name: string;
  gretting?: string; // Error: ESLint: propType "gretting" is not required, but has no corresponding defaultProps declaration.(react/require-default-props) 
}

const Hello: React.FunctionComponent<Props> = ({ name, gretting = 'night' }: Props) =>
  <p>Hi {name} Good {gretting}</p>;

const Home: NextPage = () => <Hello name="Jhon Doe" />;

export default Home;

問題

Eslint react插件抱怨此錯誤ESLint: propType "gretting" is not required, but has no corresponding defaultProps declaration.(react/require-default-props) 。

根據此答案，使用帶有默認參數值的defaultProps的方法很好，那么解決此問題的最佳方法是什么？ 使用Hello.defaultProps = {}或關閉規則react/require-default-props嗎？ 有更好的方法嗎？

Answer 3

我有的

import { NextPage } from 'next';
import React from 'react';

interface Props {
  name: string;
  gretting?: string; // Error: ESLint: propType "gretting" is not required, but has no corresponding defaultProps declaration.(react/require-default-props) 
}

const Hello: React.FunctionComponent<Props> = ({ name, gretting = 'night' }: Props) =>
  <p>Hi {name} Good {gretting}</p>;

const Home: NextPage = () => <Hello name="Jhon Doe" />;

export default Home;

問題

Eslint react插件抱怨此錯誤ESLint: propType "gretting" is not required, but has no corresponding defaultProps declaration.(react/require-default-props) 。

根據此答案，使用帶有默認參數值的defaultProps的方法很好，那么解決此問題的最佳方法是什么？ 使用Hello.defaultProps = {}或關閉規則react/require-default-props嗎？ 有更好的方法嗎？

Answer 4

在此處輸入圖片說明

這是我的代碼。 我使用“componentName”.defaultProps={ variable:defaultValue, } 來解決問題。希望它會有所幫助。