为什么'SearchBar‘会给我这个错误:
"MovieList.js:24未捕获的ReferenceError: SearchBar未在ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext的MovieList.render (MovieList.js:24)处定义(react-with- at Adons.js:6336)“
而'Movie‘运行良好。我看不出Movie
组件和SearchBar
组件的结构有什么不同。当我在页面底部使用ReactDOM.render
呈现SearchBar
组件时,它具有功能。当我从父组件的页面中删除SearchBar
元素时,页面上会显示所需的电影列表。
下面是我对所有三个组件的代码: Parent:
class MovieList extends React.Component {
constructor() {
super();
this.state = {
movies: [
{ title: 'Mean Girls' },
{ title: 'Hackers' },
{ title: 'The Grey' },
{ title: 'Sunshine' },
{ title: 'Ex Machina' }
]
};
}
render() {
var movies = this.state.movies;
console.log(movies);
return (
<div>
<SearchBar />
{movies.map((movie) =>
<Movie movie={movie}/>
)}
</div>
)
}
}
ReactDOM.render(<MovieList />, document.getElementById('app'));
window.MovieList = MovieList;
SearchBar:
class SearchBar extends React.Component {
constructor(props) {
super(props);
this.state = {
value: ''
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({
value: event.target.value
});
}
handleSubmit(event) {
console.log(this.state.value);
}
render() {
return (
<div>
<input type='text' value={this.state.value} onChange={this.handleChange} />
<button onClick={this.handleSubmit}>Search</button>
</div>
)
}
}
window.SearchBar = SearchBar;
电影:
class Movie extends React.Component {
constructor(props) {
super(props);
// this.state = {
//
// };
}
render() {
return (
<div className="movie-title">{this.props.movie.title}</div>
)
}
}
window.Movie = Movie;
发布于 2018-08-26 12:06:28
在window
中定义变量将不会在其他文件中隐式工作。您需要要求该文件使用:
require('SearchBar.js')
但这通常不是一种合适的方式。如果应用程序大小增加,全局变量可能会发生冲突。您可以导出类,然后导入它们以使用:
// SearchBar.js
export default SearchBar // instead of defining window.SearchBar
// MovieList.js
import SearchBar from './SearchBar'
现在,您可以使用SearchBar组件了。
发布于 2018-08-26 12:06:53
在SearchBar组件的底部,您应该有
export default SearchBar;
然后,在MovieList组件的顶部,您应该导入SearchBar
组件。
import SearchBar from './SearchBar'
发布于 2018-08-26 12:06:20
使用import语句导入SearchBar组件后重试,
例如,import SearchBar from './SearchBar'
https://stackoverflow.com/questions/52023086
复制相似问题