- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
尝试添加 ref 时对于我的组件,我收到一个 linting 错误:
TS2339: Property 'childNavRef' does not exist on type 'Navigation'
如何正确附加 TypeScript React 组件的引用?谢谢,您可以在下面看到该组件的代码以及 tsconfig 和 eslint。
导航.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>
);
}
}
tsconfig.json:
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "es6",
"moduleResolution": "node",
"target": "es5",
"jsx": "react",
"allowJs": true,
"baseUrl": ".",
"paths": {
"actions/*": ["src/app/redux/actions/*"],
}
}
}
.eSTLintrc:
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();
}
...
你也可以试试这个,让 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).
}
...
关于reactjs - TypeScript linting 错误 : ref does not exist on component,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57467484/
PHPLint、JSLint,我最近在阅读一些IDE. 那么,什么是“linting”? 最佳答案 Linting 是运行程序的过程,该程序将分析代码是否存在潜在错误。 参见lint在维基百科上: l
Elixir是否有 Lint (如Javascript)可以检查每个函数是否具有类型规范? 最佳答案 有一个Erlang编译器开关+warn_missing_spec可以做到这一点,但是目前我无法使其
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 5 年前。 Improve this qu
例如,我让它在 .rb 和 .js 文件上匹配。 例如**/*.{js,rb} 并且还想在 Gemfile 和 Rakefile 上进行匹配。 最佳答案 解决方案是递归地使用 {},例如 "lin
我有一个自述文件,其中包含文件夹的文档、包含的库以及如何使用它们。 自述文件不是任何库的一部分,因此 nx-lint 会引发此错误: NX ERROR The following file(s
我的 React Native 构建突然失败并出现错误,尽管一天前工作得很好,没有任何相关的更改。 FAILURE: Build failed with an exception. * What we
我有一个 lint-gradle-api.jar 错误,我在论坛上查看了其他类似的问题,但我仍然有问题。有人有想法吗? Error running Gradle: Exit code 1 from:
我已经将 Android Studio 更新到 3.2.1,现在停止了这样的问题:找不到 lint-gradle-api.jar (com.android.tools.lint:lint-gradle
我目前正在从 tslint 迁移到 eslint。我在我的 .eslintignore 中配置了几个文件夹,我想从 linting 中完全忽略它们。这确实有效,但现在我收到错误: “无效的 lint
Q (tldr;): 我如何使用 android-lint 中的 JavaScanner 检查特定函数调用是否具有特定作为参数的字符串已被 try/catch block 包围。 详细信息:我已经完成
我有一个在 Cocoapods 上发布的库。 当我运行pod lib lint时从包含 MyProject.podspec 的目录中,命令行挂起 $ pod lib lint -> MyProject
我正在尝试使用 Android lint 来检查有关我的项目的一些事情。它似乎忽略了我提供的 lint.xml 文件,使我无法启用检查。 我在 Ubuntu 14.04 上使用 Android Stu
我正在使用工具栏附带的 CodeMirror 设计一个应用程序。由于性能原因,我没有通过异步或异步模式执行 lint。 我在工具栏中提供了一个图标,单击它我正在解析和构建错误。但是我对如何在编辑器中更
使用 ./gradlew lintDebug 生成 Android lint 报告时,报告中不包括 javac lint 错误,例如弃用或未经检查的转换。 我目前只是在编译时启用这些 javac 选项
默认情况下,在 gradle 中为发布构建启用了 lint。没有 abortOnError false 此选项会中止构建。 我的发布构建成功执行(没有 lint 警告),但是当我通过 gradle 调
我有一个使用 Android 构建工具版本 1.3.1 的 gradle Android 构建,并对我的代码运行 lint 检查。运行 Sonar 任务(由 org.sonarqube gradle
只是想知道是否有人可以帮助我进行 Gulp 设置。目前我正在使用 gulp-sass 和 gulp-scss-lint 进行监视任务。我想要发生的是,当为 linting 任务完全运行保存一个 scs
我正在做一个项目,最近更新到 android Gradle 构建工具 3.0.0 (com.android.tools.build:gradle:3.0.0)。我现在在通过 Android studi
我有一个带有 gradle 的 Android 项目。虽然 gradle 插件是 2.x.x,但运行 ./gradlew lint 的时间大约为 4 分钟。我已经将项目升级到 gradle plugi
事情是这样的。我有一个与 API 15 及更高版本兼容的应用程序,但由于它非常大并且我已经达到 65k 方法限制,我不得不将它设为 MultiDexApplication 类的后代。这会稍微减慢构建时
我是一名优秀的程序员,十分优秀!