[英]Rendering the component in the react as variable vs jsx component
The following code is taken from crate react app以下代码取自 crate react app
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(<App/>, document.getElementById('root'));
serviceWorker.register()
The below code i have written我写的下面的代码
const a =
(
<div>
<h1>Visibility Toogle </h1>
<button>Show details</button>
</div>
);
ReactDOM.render(<a/>,document.getElementById('app'));
I am unable to see anything on my screen ,just a blank page but I changed the following line Now fine我在屏幕上看不到任何东西,只是一个空白页,但我更改了以下行现在很好
ReactDOM.render(a,document.getElementById('app'));
ReactDOM.render(a,document.getElementById('app'));
render i have seen the syntax i came to know the first element must be jsx thinking this is also jsx but i want to know why i failed我已经看到了语法 我开始知道第一个元素必须是 jsx 认为这也是 jsx 但我想知道为什么我失败了
2)i tryied with {a} also i failed a is also javascript method why it failed 2)我尝试了 {a} 也我失败了也是 javascript 方法为什么它失败了
You have two issues.你有两个问题。
First one: React components must start with Uppercase, otherwise react thinks that they are standard HTML tags.第一个:React 组件必须以大写开头,否则 React 认为它们是标准的 HTML 标签。
Second one: you are not rendering any component.第二个:您没有渲染任何组件。 The root of a react application must be a component.
React 应用程序的根必须是一个组件。
So change your code to something like:因此,将您的代码更改为:
const Ex = () =>
(
<div>
<h1>Visibility Toogle </h1>
<button>Show details</button>
</div>
);
ReactDOM.render(<Ex/>,document.getElementById('app'));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.