道具验证中缺少“columnLinks”答案

【问题标题】：'columnLinks' is missing in props validation道具验证中缺少“columnLinks”
【发布时间】：2020-05-19 09:44:44
【问题描述】：

我已经查找了这个问题，到目前为止，这些错误似乎大部分是由拼写错误引起的，但我很确定我没有。使用此代码：

const Component = (props: Props): ReactElement => {
  const createColumnData = (): ColumnProps<TableDataPoint>[] => Object.keys(
    props.dataSource[0],
  )
    .map((key, _, arr) => ({
      title: key.replace(/([A-Z])/g, ' $1').replace(/^./, (str) => str.toUpperCase()),
      dataIndex: key,
      width: `${100 / Math.floor(arr.length)}%`,
      render: props.columnLinks[key]
        ? ((text): ReactElement => <a href={props.columnLinks[key]}>{text}</a>) // error is in columnLinks here
        : undefined,
    }));

我收到错误'columnLinks' is missing in props validation，但我不知道为什么。是否与将 JS 传递到 href 中有关？

另外我知道，使用一个分支返回未定义的三元运算符是没有意义的，但是当我在这种情况下使用 && 时，TypeScript 会引发错误。

【问题讨论】：

听起来这是一个 linter 错误而不是 react/typescript 错误，在这种情况下，即使它很烦人，它与代码的结果无关，可能只是一些迂腐的配置
确认来自 github 的 linting 错误：github.com/yannickcr/eslint-plugin-react/issues/2353
啊，太棒了，谢谢！ :)

标签： reactjs typescript

【解决方案1】：

您是想找出它发生的原因，还是寻求解决方案？正如你所说，你不需要三元；无论如何，它 seems to be a linting error 使用 TypeScript 处理箭头函数上的推断类型。

如果您需要在保留三进制的同时消除错误，您可以专门键入columnLinks 而不是让 TS 推断它，或者将箭头函数更改为 out。根据组件在此块之外的编写方式，您可能会发现 this thread 对定义 propTypes 很有用！

或者，如果你知道你不需要它，为什么不直接去掉它呢？

【讨论】：

感谢您的回答 - columnLinks 道具在使用此接口的对象中传递：[key: string]: string; 所以我输入了作为道具传递的对象。更改箭头功能似乎并不能解决我的问题。