'UserInput' 已定义但从未使用 no-unused-vars 'UserOutput' 已定义但从未使用 no-unused-vars答案

【问题标题】：'UserInput' is defined but never used no-unused-vars 'UserOutput' is defined but never used no-unused-vars'UserInput' 已定义但从未使用 no-unused-vars 'UserOutput' 已定义但从未使用 no-unused-vars
【发布时间】：2020-04-21 23:11:18
【问题描述】：

新手反应，以下一系列讲座 我只是试图执行这个简单的代码，但出了点问题，并给了我类似的错误“UserInput”已定义但从未使用*尽管路径和 src 设置完全正常 *

App.js

import React, { Component } from 'react';
import './App.css';
import  UserInput from './UserInput/UserInput';
import UserOutput from './UserOutput/UserOutput';

class App extends Component() {

  render() {
  return (
    <div className="App">
      <p>some random text</p>
      <userInput />
      <userOutput /> 
    </div>

  );
}
}
export default App;

UserInput.js


import React from 'react';
const userInput = () => {

return <input type="text" />;
};
export default userInput;

UserOutput.js


import React from 'react';

const userOutput = () => {

return(<div>
    <button>hello </button> 
    </div>)


};
export default userOutput;

【问题讨论】：

import UserInput small u，只是一个错字
在您的 app.js 中将<userInput /> 更改为 <UserInput /> 和 <userOutput /> 更改为 <UserOutput />
您应该使用您导入的内容。 UserInput !== userInput。如果您必须导入任何默认导出，也可以使用您想要的任何名称导入。

标签： javascript reactjs

【解决方案1】：

改进

定义class App extends Component{} 而不是class App extends Component(){}

定义导入的UserInput,UserInputlike

      <UserInput />
      <UserOutput />

App.js

import  UserInput from './UserInput/UserInput';
import UserOutput from './UserOutput/UserOutput';

class App extends Component{

  render() {
  return (
    <div className="App">
      <p>some random text</p>
      <UserInput />
      <UserOutput /> 
    </div>
  );
}}
export default App;

您的代码的现场演示demo

【讨论】：

感谢瓦希德！我只想知道Component() 和简单的Component 之间的区别？
@FaisalNadeem 您只能在此处使用带函数的括号，组件就像类。