React元素未定义

Question

为什么'SearchBar'给我错误：

“MovieList.js：24未捕获的ReferenceError：SearchBar未在MovieList.render（MovieList.js：24）中定义，位于ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext（react-with-addons.js：6336）”

虽然'电影'很好。我没有看到Movie组件与SearchBar组件的结构之间的差异。当我在页面底部使用SearchBar渲染ReactDOM.render组件时，它具有功能。当我从父组件的页面中删除SearchBar元素时，电影列表会在页面上显示。

这是我所涉及的所有三个组件的代码：父：

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;

搜索栏：

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;

Answer 1

在您的SearchBar组件的底部，你应该有

export default SearchBar;

然后在MovieList组件的顶部，您应该导入SearchBar组件。

import SearchBar from './SearchBar'

Answer 2

使用import语句导入SearchBar组件后尝试，

例如，import SearchBar from './SearchBar'

Answer 3

在window中定义变量将无法在其他文件中隐式工作。您需要使用该文件：

require('SearchBar.js')

但这通常不适合。如果应用程序大小增加，全局变量可能会发生您将导出该类并将其导入以使用：

// SearchBar.js
export default SearchBar // instead of defining window.SearchBar
// MovieList.js
import SearchBar from './SearchBar'

现在，您可以使用SearchBar组件。

Answer 4

看到组件被声明为全局变量（window.SearchBar = SearchBar）而不是模块导入，我想知道您的文件是按字母顺序导入的：

<script src="./Movie.js"></script>
<script src="./MovieList.js"></script>
<script src="./SearchBar.js"></script>

如果是这种情况，则应在父组件之前导入子组件。

<!-- children -->
<script src="./Movie.js"></script>
<script src="./SearchBar.js"></script>
<!-- parent -->
<script src="./MovieList.js"></script>

另一个答案在模块加载时轻推，如果你正在构建的不仅仅是原型，我鼓励你去研究。