导入反应组件时收到错误：要求没有定义

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会节点模块，而不是一个自定义的组件来处理。要正确导入自定义组件，我们需要提供路径。如果它存在于相同的目录中，则使用./，否则使用../来提供路径。