[英]TailwindCSS and React Not Correctly Importing JSX Elements
I have two files: The main file - App.js and a JSX Element which I want to load in App.js.我有两个文件:主文件 - App.js 和我想在 App.js 中加载的 JSX 元素。 element.js has the following code:
element.js 有以下代码:
const element = () => {
return (
<div className="text-gray-100 bg-gray-800 h-64 px-4">
<h1>Test Title</h1>
<p>Lorem ipsum</p>
</div>
);
};
export default element;
The App.js file is as follows: App.js 文件如下:
import './App.css';
import element from './element';
function App() {
return (
<div className="flex">
<element />
</div>
);
};
export default App;
When importing, VSC shows that "element is declared but not used", and the html page shows nothing but a white page.导入时VSC显示“元素已声明但未使用”,html页面只显示白页。
In JSX, lower-case tag names are considered to be HTML tags.在 JSX 中,小写的标签名称被认为是 HTML 标签。 However, lower-case tag names with a dot (property accessor) aren't.
但是,带有点(属性访问器)的小写标记名称不是。
See HTML tags vs React Components.请参阅 HTML 标签与 React 组件。
<component /> compiles to React.createElement('component') (html tag)
<Component /> compiles to React.createElement(Component)
<obj.component /> compiles to React.createElement(obj.component)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.