我创建了一个组件并正在导出它
import React , {Component} from 'react'
import logo from './logo.svg';
class Item extends Component {
render () {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">ReactND - Coding Practice</h1>
</header>
<h2>Shopping List</h2>
<form onSubmit={this.addItem}>
<input
type="text"
placeholder="Enter New Item"
value={this.state.value}
onChange={this.handleChange}
/>
<button disabled={this.inputIsEmpty()}>Add</button>
</form>
<button onClick={this.deleteLastItem} disabled={this.noItemsFound()}>
Delete Last Item
</button>
</div>
)
}
}
export default Item
我想在我的应用程序组件中使用这个组件,如下所示
import React from 'react';
import './Item';
class App extends React.Component {
render() {
return (
<div>
<Item />
</div>
);
}
}
export default App;
但是我在 App.js 中遇到了这个错误
Line 9: 'Item' is not defined react/jsx-no-undef
很确定我做了一切。我已经导出并导入了这个组件,那么我在这里缺少什么?
您必须为导入命名。
import React from 'react';
import Item from './Item';
class App extends React.Component {
render() {
return (
<div>
<Item />
</div>
);
}
}
export default App;
而不是导入'./Item'; 写入 import Item from './Item'; 请检查路径组件“./Item”是否正确。