如何在 React 中将自制组件导入 index.js

Question

我正在学习反应，但我一直在学习如何导入自制组件。

所以我把它变成了src/components/Part/Part.jsx

在我的 index.js 文件中，我像这样import { Part } from './components/Part/Part.jsx';

const Part = (props) =>{
    return (
    <p>{props.part + " " + props.exec}</p>
    )
  }

  export default Part

Answer 1

在您的导入语句中删除大括号。 然后它会起作用。 :)

更新这个：

import { Part } from './components/Part/Part.jsx';

到：

import Part from './components/Part/Part.jsx';

为了更好地理解这里的命名导出和默认导出： https : //developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

Answer 2

如果您的文件夹结构类似于 -

src
|_components
  |__Part
    |__Part.jsx
    |__index.js

并且想要从index.js导出Part.jsx ，那么您可以将此行写入index.js文件。

// At src/components/Part/index.js file
export {default} from './Part.jsx';

现在您可以从任何地方导入Part组件，例如-

import Part from 'path/to/components/Part';

更新：您可以按照这样的结构来导入组件，例如import Part from './components/Part'而不是import Part from './components/Part/Part.jsx' 。