Question

我的文件夹中有两个文件可供使用。 Minside.js和footer.js。当我从“ ./component/Minside.js”导入Minside到 index.js 时，它应能正常工作。现在我想将bottom.js导入到MyApp.js中，作为从“ ./component/footer.js”的导入底部。但是，代码编辑器无法像使用“ minSide”那样找到关键字“ bottom”。这两个文件位于完全相同的文件夹中。

// Minside.js文件

import React from "react";
import bottom from "./component/bottom.js"; // **This do not work**

function Minside() {
    return (
     <div>
<main>
<nav></nav>
</main>
<footer/>
     </div>
    )
}

export default Minside

// index.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import Minside from "./component/Minside.js" // **This works. I can import the minside component to index.js**

ReactDOM.render(<Minside />, document.getElementById('root'));

// Bottom.js文件

import React from "react";
import ReactDOM from 'react-dom';
function bottom() {

return (
)
<footer> <h1> This is my footer </h1>
}

export default bottom

Answer 1

从同一位置导入

{{1}}

Answer 2

您需要大写“底部”部分。

'当元素类型以小写字母开头时，它指的是内置组件（例如或），并导致字符串“ div” 或“ span”传递给React.createElement。以a开头的类型大写字母，例如编译为React.createElement（Foo）和对应于在JavaScript文件中定义或导入的组件。” https://reactjs.org/docs/jsx-in-depth.html

如何从同一文件夹导入多个组件？

2 个答案: