Question

这里是训练营学生。我正在做一个有趣的个人项目，但我一直遇到这个错误。我已经检查了这些文件的导入和导出，一切看起来都正确。还有什么可能导致此错误？

错误：

<块引用>

元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查 App 的渲染方法。

App.js file 
import "./styles.css";
import React from 'react'
import { Main } from './main.js'

export default function App() {
  return (
    <div className="App">
      </Main>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

整个项目here。我对该项目的目标在 app.js

中进行了评论

Answer 1

修复方法是您导入 main, import Main from './main.js' 的方式，因为您将其导出为默认值。您不是在导出对象

App.js file 
import "./styles.css";
import React from 'react'
import Main from './main.js'

export default function App() {
  return (
    <div className="App">
      <Main/>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

您可能还需要向 Main 类添加渲染方法。

import { Component } from "react";
import SUBJECT from "./subject";
import GENRE from "./genre";

class Main extends Component {
  constructor(props) {
    super(props);
    this.state = {
      subject: SUBJECT,
      genre: GENRE
    };
  }
  render() {
    return null;
  };
}

export default Main;

反应：元素类型无效

1 个答案: