導入反應組件時收到錯誤：要求沒有定義

Question

我有一個TodoItem組件，並希望將其導入其他成分，這就是我導入方式：

import TodoItem from 'TodoItem'; 

什麼是錯的這個進口線，則引發錯誤：

required is not defined

這些是組件：

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); 

這是我要導出的文件：

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

使用此：import TodoItem from './TodoItem'; //path to TodoItem

原因：當您使用import TodoItem from 'TodoItem'，TodoItem會節點模塊，而不是一個自定義的組件來處理。要正確導入自定義組件，我們需要提供路徑。如果它存在於相同的目錄中，則使用./，否則使用../來提供路徑。