警告'ScrollingHorizo​​ntally'已定义，但从未使用过no-unused-vars [英] warning 'ScrollingHorizontally' is defined but never used no-unused-vars

问题描述

有人可以帮忙解释这个错误吗?我尝试了几种不同的方式来编写React.Component.缺少什么吗?

Can someone please help explain this error? I have tried a few different ways to write the React.Component. Is there something missing?

错误:

4:7警告'ScrollingHorizo​​ntally'已定义，但从未使用过no-unused-vars

4:7 warning 'ScrollingHorizontally' is defined but never used no-unused-vars

组件:

import React, { Component } from 'react'
import HorizontalScroll from 'react-scroll-horizontal'

class ScrollingHorizontally extends Component {
  render() {
    const child   = { width: `30em`, height: `100%`}
    const parent  = { width: `60em`, height: `100%`}
    return (
      <div style={parent}>
        <HorizontalScroll>
            <div style={child} />
            <div style={child} />
            <div style={child} />
        </HorizontalScroll>
      </div>
    )
  }
}

我也尝试过:

import React from 'react'
import HorizontalScroll from 'react-scroll-horizontal'

class ScrollingHorizontally extends React.Component {
  ...

推荐答案

要回答您的问题，最初收到的警告是您定义了变量 ScrollingHorizo​​ntally 但从未使用过.即使它是一个类，它仍然是一个已定义的变量.使用标准变量更容易证明此错误:

To answer your question, the original warning you were receiving is that you defined the variable ScrollingHorizontally but never used it. Even though it is a class it is still a defined variable. It would be easier to demonstrate this error with standard variables:

const things = 123;
const stuff = 456; // this will throw an warning because it is never used.

console.log(things);

类也会发生相同的情况.如果您在文件中定义一个类而从不使用它，则将收到该警告.从文件中导出类将有效地使用它，因为您正在执行导出它的操作.

The same things happens with classes. If you define a class within a file and never use it, you will receive that warning. Exporting a class from a file will effectively be using it because you are performing the action of exporting it.

-

为什么会出现此错误?

元素类型无效:预期为字符串(对于内置组件)或类/函数(对于复合组件)，但得到:未定义.您可能忘记了从定义文件中导出组件，或者可能混淆了默认导入和命名导入.

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

这很简单，您没有从文件中导出类，因此当您将组件导入到 index.js 文件中时，它什么也没找到.并非文件中的所有类都会自动导出，您需要明确声明应将其导出.这使您可以将某些类或变量 private 保留到特定文件.

This is pretty straight forward, you didn't export the class from your file so when you imported the component into your index.js file it didn't find anything. Not all classes within a file automatically get exported, you need to explicitly declare that they should be exported. This allows you to keep certain classes or variables private to a specific file.

MDN-导出(此链接会分解不同类型的导出)

在一个文件中包含多个组件的示例:

Example with multiple components in one file:

parent.js

import React from 'react';


// This component is not exported, can only be used within
// this file.
class Child extends React.Component {
    // ...
}

// This component is not used in the file but is exported to be
// used in other files. (named export)
export class RandomComponent extends React.Component {
    // ...
}

// This component is exported as the default export for the 
// file. (default export)
export default class Parent extends React.Component {

    //...

    render() {
        return <Child />
    }
}

index.js

import React from 'react';

import Parent, { RandomComponent } from './parent.js';

// ...

这篇关于警告'ScrollingHorizo​​ntally'已定义，但从未使用过no-unused-vars的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！