我正在用reactJS框架构建一个项目,当我有一个大类App时,我决定分成几个类。更改后,我会看到以下错误
“应用”未定义
有人可以帮助我解决这个问题吗?
我尝试了所有Webpack设置,但无济于事。它仅在划分类“ App”之后出现,然后才能正常工作。
这是我的代码。
import React, { Component } from 'react';
import './App.css';
class App extends Component {
constructor(props){
super(props);
this.state = {
list,
searchTerm: "",
};
this.onDismiss = this.onDismiss.bind(this);
this.onSearchChange = this.onSearchChange.bind(this);
}
onSearchChange(event){
this.setState({ searchTerm: event.target.value });
}
onDismiss(id) {
const isNotId = item => item.objectID !== id;
const updatedList = this.state.list.filter(isNotId);
this.setState({ list: updatedList });
}
render() {
const { searchTerm, list } = this.state;
return (
<div className="App">
<Search
value = {searchTerm}
onChange = {this.onSearchChange}
/>
<Table
list = {list}
pattern = {searchTerm}
onDismiss = {this.onDismiss}
/>
</div>
);
}
}
class Search extends Component {
render(){
const { value, onChange } = this.props;
return(
<form>
<input
type = "text"
value = "value"
onChange = {onChange}
/>
</form>
);
}
}
class Table extends Component {
render(){
const { list, pattern, onDismiss } = this.props;
return(
<div>
{list.filter(isSearched(pattern)).map(item =>
<div key={item.objectID}>
<span>
<a href={item.url}>{item.title}</a>
</span>
<span>{item.author}</span>
<span>{item.num_comments}</span>
<span>{item.points}</span>
<span>
<button onClick={() => onDismiss(item.objectID)} type="button">
Delete
</button>
</span>
</div>
)}
</div>
);
}
};
}
export default App;
答案 0 :(得分:1)
您需要的答案是here
我想解释的几件事。在下面的代码中查看我的评论
import React, { Component } from 'react';
import './App.css'; // have proper naming conventions change it to lowercase app.css
export default class App extends Component {
constructor(props){
super(props);
this.state = {
list,
searchTerm: "",
};
//Manual binding are ok but if you use arrow function you can stay away with scope related issues like let that = this;
//this.onDismiss = this.onDismiss.bind(this);
//this.onSearchChange = this.onSearchChange.bind(this);
}
onSearchChange = (event) => {
this.setState({ searchTerm: event.target.value });
}
onDismiss = (id) => {
const isNotId = item => item.objectID !== id;
const updatedList = this.state.list.filter(isNotId);
this.setState({ list: updatedList });
}
render() {
const { searchTerm, list } = this.state;
return (
<div className="App"> //Follow naming conventions chang classname App to app
<Search
value = {searchTerm}
onChange = {this.onSearchChange}
/>
<Table
list = {list}
pattern = {searchTerm}
onDismiss = {this.onDismiss}
/>
</div>
);
}
}
//you need to export your component to make it available to other components
export class Search extends Component {
render(){
const { value, onChange } = this.props;
return(
<form>
<input
type = "text"
value = "value"
onChange = {onChange}
/>
</form>
);
}
}
//you need to export your component to make it available to other components
export class Table extends Component {
render(){
const { list, pattern, onDismiss } = this.props;
return(
<div>
{list.filter(isSearched(pattern)).map(item =>
<div key={item.objectID}>
<span>
<a href={item.url}>{item.title}</a>
</span>
<span>{item.author}</span>
<span>{item.num_comments}</span>
<span>{item.points}</span>
<span>
<button onClick={() => onDismiss(item.objectID)} type="button">
Delete
</button>
</span>
</div>
)}
</div>
);
}
};
}