Fehler bekommen, wenn eine Komponente reagieren importieren: nicht erforderlich ist, definiert

Question

Ich habe eine TodoItem Komponente und will es in einer anderen Komponente importieren, ist dies die Art, wie ich den Import bin:

import TodoItem from 'TodoItem'; 

, was in diesem Import falsch ist Linie, den Fehler zu werfen:

required is not defined

Dies sind die Komponenten:

class LayOut extends React.Component{ 

constructor(){ 
    super(); 
    this.changeStatus = this.changeStatus.bind(this); 
    this.state = { 
     tasks:[ 
      { 
       name:"buy milk", 
       completed: false 
      }, 
      { 
       name:"buy water", 
       completed: false 
      }, 
      { 
       name:"buy yougard", 
       completed: false 
      } 
     ] 
    } 
} 
changeStatus(index){ 
    var tasks = this.state.tasks; 
    var task = tasks[index]; 
    task.completed = !task.completed; 
    this.setState({tasks:tasks}) 
} 
render(){ 
    return(
      <ul> 
       { 
        this.state.tasks.map((task, index)=> { 
         return <TodoItem clickHandler={this.changeStatus} index={index} key={task.name} detail={task} /> 
        }) 
       } 
      </ul> 
    ); 
} 
} 

var app = document.getElementById('app'); 
ReactDOM.render(<LayOut />, app); 

Dies ist die Datei, die ich exportieren möchten:

class TodoItem extends React.Component{ 

    render(){ 
     return(
      <li onClick={()=>{this.props.clickHandler(this.props.index); }} className={this.props.detail.completed ? 'completed' : ''}> 
      {this.props.detail.name} 
      </li> 
    ); 
    } 
} 

export default TodoItem; 

Answer 1

verwenden: import TodoItem from './TodoItem'; //path to TodoItem

Grund: Wenn Sie import TodoItem from 'TodoItem' verwenden, wird TodoItem als Knotenmodule behandelt werden, nicht eine benutzerdefinierte definiert Komponente. Um die benutzerdefinierte Komponente korrekt importieren zu können, müssen wir den Pfad angeben. Verwenden Sie ./, wenn es in demselben Verzeichnis vorhanden ist, andernfalls verwenden Sie ../, um den Pfad anzugeben.