如何在 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' 。