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;

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;

Answer 1

应该在SearchBar组件的底部

export default SearchBar;

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

import SearchBar from './SearchBar'

Answer 2

尝试使用导入语句导入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>

其他答案将在模块加载时微调，如果您要构建的不是原型，我会鼓励您研究一下。

未定义React元素

4 个答案: