未定义React元素
为什么'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;回答 4
Stack Overflow用户
发布于 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组件了。
Stack Overflow用户
发布于 2018-08-26 12:06:53
在SearchBar组件的底部，您应该有
export default SearchBar;
然后，在MovieList组件的顶部，您应该导入SearchBar组件。
import SearchBar from './SearchBar'
Stack Overflow用户
发布于 2018-08-26 12:06:20
使用import语句导入SearchBar组件后重试，
例如，import SearchBar from './SearchBar'
https://stackoverflow.com/questions/52023086
复制相似问题
腾讯云开发者
