Reactjs TypeScript linting错误：组件上不存在ref

尝试向组件添加时，我遇到了一个linting错误：

TS2339:类型“导航”上不存在属性“childNavRef”

如何正确附加typescript组件的引用？谢谢，您可以看到下面组件以及tsconfig和eslint的代码

navigation.tsx:

import * as React from 'react';

interface MyState {
  show: boolean;
}

export default class Navigation extends React.Component<{}, MyState> {
  public constructor() {
    super({});
    this.state = {
      show: true,
    };
    this.childNavRef = React.createRef();
  }

  public render(): React.ReactElement {
    return (
      <nav>
        {
          this.state.show
          && (
          <div ref={this.childNavRef}>
            This is a component
          </div>
          )
        }
      </nav>
    );
  }
}

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "es6",
    "moduleResolution": "node",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "baseUrl": ".",
    "paths": {
      "actions/*": ["src/app/redux/actions/*"],
    }
  }
}

module.exports = {
  env: {
    'jest/globals': true
  },
  extends: [
    'airbnb',
    'plugin:@typescript-eslint/recommended',
  ],
  globals: {
    'document': true,
    'window': true,
  },
  overrides: [
    {
      'files': ['**/*.tsx'],
      'rules': {
        'react/prop-types': 'off'
      }
    }
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    project: './tsconfig.json',
  },
  plugins: ['@typescript-eslint', 'jest'],
  rules: {
    'import/no-extraneous-dependencies': [
      'error',
      {
        'devDependencies': [
          '**/*.stories.jsx',
          '**/*.stories.tsx',
          '**/*.test.jsx',
          '**/*.test.js',
          '**/*.test.tsx',
          '**/*.test.ts',
          'setupTests.js',
        ],
      },
    ],
    '@typescript-eslint/camelcase': ['error', { 'properties': 'never' }],
    'indent': 'off',
    '@typescript-eslint/indent': [
      'error',
      2,
      {
        'ignoredNodes': ['JSXElement'],
        'SwitchCase': 1,
      },
    ],
    '@typescript-eslint/explicit-function-return-type': ['error', {
      'allowExpressions': true,
      'allowTypedFunctionExpressions': true
    }],
    'semi': 'off',
    '@typescript-eslint/semi': ['error'],
    'react/destructuring-assignment': [false, 'always', { 'ignoreClassFields': true }],
    'react/jsx-filename-extension': [1, { 'extensions': ['.jsx', '.tsx'] }],
  },
  settings: {
    'import/extensions': [
      '.js',
      '.jsx',
      '.ts',
      '.tsx',
    ],
    'import/resolver': {
      webpack: {
        config: 'webpack.common.js',
      }
    }
  },
};

.estlintrc:

import * as React from 'react';

interface MyState {
  show: boolean;
}

export default class Navigation extends React.Component<{}, MyState> {
  public constructor() {
    super({});
    this.state = {
      show: true,
    };
    this.childNavRef = React.createRef();
  }

  public render(): React.ReactElement {
    return (
      <nav>
        {
          this.state.show
          && (
          <div ref={this.childNavRef}>
            This is a component
          </div>
          )
        }
      </nav>
    );
  }
}

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "es6",
    "moduleResolution": "node",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "baseUrl": ".",
    "paths": {
      "actions/*": ["src/app/redux/actions/*"],
    }
  }
}

module.exports = {
  env: {
    'jest/globals': true
  },
  extends: [
    'airbnb',
    'plugin:@typescript-eslint/recommended',
  ],
  globals: {
    'document': true,
    'window': true,
  },
  overrides: [
    {
      'files': ['**/*.tsx'],
      'rules': {
        'react/prop-types': 'off'
      }
    }
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    project: './tsconfig.json',
  },
  plugins: ['@typescript-eslint', 'jest'],
  rules: {
    'import/no-extraneous-dependencies': [
      'error',
      {
        'devDependencies': [
          '**/*.stories.jsx',
          '**/*.stories.tsx',
          '**/*.test.jsx',
          '**/*.test.js',
          '**/*.test.tsx',
          '**/*.test.ts',
          'setupTests.js',
        ],
      },
    ],
    '@typescript-eslint/camelcase': ['error', { 'properties': 'never' }],
    'indent': 'off',
    '@typescript-eslint/indent': [
      'error',
      2,
      {
        'ignoredNodes': ['JSXElement'],
        'SwitchCase': 1,
      },
    ],
    '@typescript-eslint/explicit-function-return-type': ['error', {
      'allowExpressions': true,
      'allowTypedFunctionExpressions': true
    }],
    'semi': 'off',
    '@typescript-eslint/semi': ['error'],
    'react/destructuring-assignment': [false, 'always', { 'ignoreClassFields': true }],
    'react/jsx-filename-extension': [1, { 'extensions': ['.jsx', '.tsx'] }],
  },
  settings: {
    'import/extensions': [
      '.js',
      '.jsx',
      '.ts',
      '.tsx',
    ],
    'import/resolver': {
      webpack: {
        config: 'webpack.common.js',
      }
    }
  },
};

---

您必须先声明成员，然后才能使用它们

试试这个：

export default class Navigation extends React.Component<{}, MyState> {
  // Declare the private member variable
  private childNavRef: React.RefObject<HTMLDivElement>; 

  public constructor() {
    super({});
    this.state = {
      show: true,
    };
    this.childNavRef = React.createRef();
  }
  ...

导出默认类导航扩展React.Component{
//声明私有成员变量
private childNavRef:React.reObject；
公共构造函数（）{
超级（{}）；
此.state={
秀：没错，
};
this.childNavRef=React.createRef（）；
}
...

您也可以尝试此操作，并让TypeScript自动推断变量类型：

export default class Navigation extends React.Component<{}, MyState> {
  // Declare AND initialize the private member variable
  private childNavRef = React.createRef();

  public constructor() {
    super({});
    this.state = {
      show: true,
    };

    // Note that you no longer have to instantiate childNavRef here anymore, 
    // as TypeScript will do that automatically (it will actually compile to something
    // like in the first example, where ref is set after the super call in the constructor).
  }
  ...

导出默认类导航扩展React.Component{
//声明并初始化私有成员变量
private childNavRef=React.createRef（）；
公共构造函数（）{
超级（{}）；
此.state={
秀：没错，
};
//请注意，您不再需要在此处实例化childNavRef，
//因为TypeScript会自动完成（它实际上会编译成
//与第一个示例类似，其中ref设置在构造函数中的超级调用之后）。
}
...