我有这个奇怪的错误,知道我很好地组织了文件并仔细导出和导入它们,但不知道为什么它会抛出这个错误!代码从组件排序到 App 渲染方法
import React from 'react';
import './Global.css'
const Item = ({data, Icon}) => {
return (
<div class='item'>
<Icon />
<h2>hhh{data}</h2>
</div>
);
}
export default Item;
import React from "react";
import Logo from "./components/Logo"
import Item from './components/Item.js'
import Tweetbutton from './components/Tweetbutton'
import Profile from './components/Profile'
const Nav = () => {
return (
<div class='Nav'>
<Logo />
<div class='Nav__wrapper'>
<Item data="home"/>
<Item data="home"/>
<Item data="home"/>
<Item data="home"/>
<Item data="home"/>
</div>
<Tweetbutton />
<Profile />
</div>
);
}
export default Nav;
import React from 'react'
import Nav from './High Level/Nav/Nav'
import './wrapper.css'
function Wrapper() {
return (
<div>
<Nav />
</div>
)
}
export default Wrapper;
import './App.css';
import Wrapper from './components/wrapper/wrapper';
function App() {
return (
<div className="App">
<Wrapper />
</div>
);
}
export default App;
我尝试显示项目图标和数据,例如 “主页图标”+主页文本,但它给我带来了错误
你没有导入Icon组件,也不是一个组件,你没有对Icon进行道具钻取。您必须从 Nav comp 向 Item 组件发送名为“icon”的道具。