未在React项目中定义App.js

时间:2018-08-26 12:29:27

标签: reactjs

我正在用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;

1 个答案:

答案 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>    
      );
    }
  };
}