Eslint 不应该强制 props 字段在 React 中是只读的吗？

【问题标题】：Shouldn't Eslint enforce props fields to be readonly in React?Eslint 不应该强制 props 字段在 React 中是只读的吗？
【发布时间】：2020-06-04 12:11:01
【问题描述】：

假设我有以下代码sn-p：

interface MyProps {
  label: string;
}

function MyComponent(props: MyProps) {
  return (
    <p>
      {props.label}
    </p>
  );
}

如果我没有将Props 中的字段标记为readonly，Eslint 和 TypeScript 编译器都不会引发警告或错误。然而，组件 props 永远不应被修改，否则 React UI 引擎将无法按预期工作。

这适用于 Eslint@6.8.0、React@16.13.1 和 TypeScript@3.9.3。

【问题讨论】：

标签： reactjs typescript eslint

【解决方案1】：

它应该已经被规则 eslint(no-param-reassign) 我的编辑器给出的 eslint 错误信息如下：

import React from 'react';

interface MyProps {
  label: string;
}

export function MyComponent(props: MyProps): React.ReactElement {
  props.label = 'hi'; // Assignment to property of function parameter 'props'.eslint(no-param-reassign)
  return <p>{props.label}</p>;
}

【讨论】：

很好，虽然如果界面首先缺少readonly 属性，我会喜欢 Eslint 抱怨。