相关疑难解决方法(0)

我正在尝试设置一个typescript-react-eslint项目并且无法通过此样板组件的 eslint 错误：

import * as React from "react";

interface ButtonProps {
  children?: React.ReactNode,
  onClick?: (e: any) => void,
}

const styles = {
  border: "1px solid #eee",
  borderRadius: 3,
  backgroundColor: "#FFFFFF",
  cursor: "pointer",
  fontSize: 15,
  padding: "3px 10px",
  margin: 10
};

const Button: React.FunctionComponent<ButtonProps> = props => (
  <button onClick={props.onClick} style={styles} type="button">
    {props.children}
  </button>
);

Button.defaultProps = {
  children: null,
  onClick: () => {}
};
export default Button;

错误是：

  19:26  error  'onClick' is missing in props validation …

这是我第一次遇到这个错误，我在两个月前做的之前的react-app项目中从未遇到过这个错误

该错误表示： “column.title”缺少道具验证 “column”缺少道具验证” 列是来自父元素的道具，我对该 props.column 使用了解构

我使用eslint告诉我这种类型的错误...只是为了提供额外信息

这是App.js：

import React from 'react';
import Column from './Column';
import { initialData } from './initial-data';

const App = () => {
  const [Data] = React.useState(initialData);

  React.useEffect(() => {
    console.log(Data);
  }, [Data]);

  return Data.columnOrder.map((dataId) => {
    const { tasks, columns } = Data;
    const column = columns[dataId];
    const tasksData = column.taskIds.map((taskId) => tasks[taskId]);

    return <Column key={column.id} column={column} tasks={tasksData}></Column>;
  });
};

export default App;

这是Column.js： ---> 我从中得到了错误

import …