组件内部的组件

Question

我和React.js一起工作

我想使用组件x内应用程序组件(app.js)，即在index.js内部。

它不起作用。**

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`.

**

index.js

    import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

App.js

import "./styles.css";
import {SubComponent} from "./components/Subcomponent";

export default function App() {
  return (
    <SubComponent/>
  );
}

子分量

const HelloWorld = ()=>{ return(<p>Hello World !</p>)}
export default HelloWorld();

子组件文件夹是：

​

​

Answer 1

您的子组件：

• 需要导出与应用程序中导入的名称相同的名称--或者在两个地方使用相同的名称导入/导出，或者在两个地方使用默认的导入/导出。(您目前正在导入一个名为SubComponent但默认的SubComponent，以导出一个组件，这是一个函数，以便可以在应用程序中使用React.createElement调用它。不要自己调用函数。

App.js

import {SubComponent} from "./components/Subcomponent";

子分量

export const SubComponent = () => {
  return(<p>Hello World !</p>)
};