在 React 中導入模塊時出錯

Question

在我導入Imex之前，該應用程序運行良好，沒有任何錯誤，它顯示 4 個錯誤，如下所示

1. Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 
You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check your code at App.js:8 at App

2. Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 
You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.
    at createFiberFromTypeAndProps (react-dom.development.js:25058)
    at createFiberFromElement (react-dom.development.js:25086)
    at createChild (react-dom.development.js:13446)
    at reconcileChildrenArray (react-dom.development.js:13719)
    at reconcileChildFibers (react-dom.development.js:14125)
    at reconcileChildren (react-dom.development.js:16990)
    at updateHostComponent (react-dom.development.js:17632)
    at beginWork (react-dom.development.js:19080)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)

3. The above error occurred in the <div> component:

at div
at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

4. Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 
You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.
    at createFiberFromTypeAndProps (react-dom.development.js:25058)
    at createFiberFromElement (react-dom.development.js:25086)
    at createChild (react-dom.development.js:13446)
    at reconcileChildrenArray (react-dom.development.js:13719)
    at reconcileChildFibers (react-dom.development.js:14125)
    at reconcileChildren (react-dom.development.js:16990)
    at updateHostComponent (react-dom.development.js:17632)
    at beginWork (react-dom.development.js:19080)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)

應用程序.js

import Display from './Comp/Display';
import Imex from './ImportExport/Import';

function App() {
  return (
    <div>
      <Display />
      <Imex />
    </div>
  );
}

export default App;

Display有一些數據在導入Imex之前顯示在頁面上。

導入.js

import a from "./Export";
const Imex = console.log(a); 
export default Imex;

導出.js

const a = "Name";
export default a;

在控制台中打印“名稱”的 import.js 語句正在運行，但屏幕沒有顯示任何內容。

Answer 1

錯誤很簡單，您沒有從Import.js和Export.js導出反應組件。

但是，這會起作用：

應用程序.js

import Display from './Comp/Display';
import imex from './ImportExport/Import';

function App() {
  return (
    <div>
      <Display />
      {imex}
    </div>
  );
}

export default App;

導入.js

import a from "./Export";
const imex = a + " is john doe"; 
export default imex;

導出.js

const a = "Name";
export default a;

如果您在反應組件 (JSX) 中編寫 javascript，則應在兩個花括號之間編寫 js。 而且它應該是一個表達式而不是一個語句

Answer 2

您正在嘗試渲染一個組件Imex但它沒有返回JSX 。 您可以嘗試使用JSX代碼嗎？