ReactJS中组件（函数）的导入与导出方法及实操问题求助

看起来你在React项目里导入Search组件时遇到了麻烦，我来帮你梳理下常见的原因和解决办法。先把你提供的App组件代码整理出来方便查看：

import React, { Component } from 'react';
import './App.css';
import Search from './Search';

export default class App extends Component {
  constructor() {
    super();
    const peoples =[
      {id:0, name:"Jean"}, 
      {id:1, name:"Jaquinha"}, 
      {id:2, name:"Ricardo"}, 
      {id:3, name:"JaCA"}, 
      {id:4, name:"Letiiicia"}, 
      {id:5, name:"Dai"}, 
      {id:6, name:"Da iIIane"}, 
      {id:7, name:"Tamy"}, 
      {id:8, name:"Tamyresss"}, 
      {id:...}
    ];
    // 其他组件逻辑...
  }

  render() {
    return (
      <div className="App">
        {/* 预期渲染Search组件 */}
        <Search />
      </div>
    );
  }
}

下面是几个最可能导致导入失败的原因，你可以逐一排查：

1. 导出与导入方式不匹配 #

你在App里用的是import Search from './Search'，这要求Search组件必须是默认导出。检查你的Search.js文件：

• 如果是类组件，正确的导出方式：

  import React, { Component } from 'react';
  
  export default class Search extends Component {
    render() {
      return <div>搜索组件内容</div>;
    }
  }
  

• 如果是函数式组件，正确的导出方式：

  import React from 'react';
  
  const Search = () => {
    return <div>搜索组件内容</div>;
  };
  
  export default Search;
  

如果Search组件用的是命名导出（比如export const Search = () => {...}），那你需要改成命名导入：

import { Search } from './Search';

2. 文件路径不正确 #

确认Search组件的文件位置：

• 如果Search.js和App.js在同一个文件夹下，./Search是正确的；
• 如果Search在子文件夹里（比如src/components/Search.js），路径要写成./components/Search；
• 注意文件名的大小写！在Linux/macOS这类大小写敏感的系统里，search.js和Search.js会被识别成不同的文件。

3. 缺少文件扩展名 #

有些项目的webpack配置没有自动识别.js/.jsx扩展名，这时候你需要在导入时写完整的扩展名：

import Search from './Search.jsx';

4. Search组件本身有语法错误 #

如果Search组件里存在未闭合的标签、拼写错误或者其他语法问题，也会导致导入失败。打开浏览器的开发者工具（F12），查看控制台的报错信息，通常会明确指出错误位置。

如果还是解决不了，你可以把Search组件的代码贴出来，或者把控制台的报错信息发出来，这样能更精准地定位问题~

内容的提问来源于stack exchange，提问作者Jota