时间戳

首页 > 解决方案 > 我的主要组件的定义中的“元素类型无效：需要一个字符串”：export const Autocomplete = (props) => {....}

javascript - 我的主要组件的定义中的“元素类型无效：需要一个字符串”：export const Autocomplete = (props) => {....}

问题描述

我是新来的反应。

我的主要组件是这样定义的：

import React from "react";
import { useState } from "react";
export const Autocomplete = (props) => {

return (
<div className="wrapper">
  hello
</div>
);
};

我收到此错误：

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

这是我的 index.js

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
 <StrictMode>
  <App />  <!--my main component-->
 </StrictMode>,
rootElement
);

我究竟做错了什么？谢谢

标签： javascriptreactjs

解决方案

回答

您已将主组件命名为名为 的导出Autocomplete，但您正在导入一个名为 的默认组件App。

尝试这个：

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import { Autocomplete } from "./App";

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

ReactDOM.render(
 <StrictMode>
  <Autocomplete />  <!--my main component-->
 </StrictMode>,
rootElement
);

解释命名与默认导出

有两种导出方式，每种方式都需要您以不同的方式导入导出的成员。

命名导出/导入

命名导出必须使用与导出成员相同的名称导入。导入还将在导入的成员周围使用大括号。您可以从单个文件中导出多个成员。

foobar.js

export const foo = 'foo';
export const bar = 'bar';
const baz = 'baz';

// or

const foo = 'foo';
const bar = 'bar';
const baz = 'baz';
export {foo, bar};

main.js

import { foo, bar } from './foobar'

默认导出/导入

可以使用您想要的任何名称导入默认导出。导入周围不会有大括号。您只能默认从文件中导出单个成员。

foobar.js

export default {foo: '', bar: ''}; // directly exporting the value (an object), no variable declaration involved

// or

const foobar = {foo: '', bar: ''};
export default foobar;

main.js

import foobar from './foobar';
const foo = foobar.foo;
const bar = foobar.bar;

// or

import whatever from './foobar';
const foo = whatever.foo;
const bar = whatever.bar;

命名和默认导出/导入

您还可以从同一个文件中同时拥有默认导出和命名导出。你可能已经在 React 中看到了这一点。

foobar.js

export const foo = 'foo';
export const bar = 'bar';
export default foobar = 'foobar';

main.js

import myFoobar, { foo, bar } from './foobar'
import React, { useState } from 'react';

推荐阅读