Question

我有一个TodoItem组件并希望将其导入其他组件，这是我导入的方式：

import TodoItem from 'TodoItem';

这个导入行有什么问题，它抛出错误：

必需未定义

这些是组件：

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

导入反应组件时出错：未定义必需

1 个答案: