以下代码取自crate React应用程序
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()
下面的代码是我写的
const a =
(
<div>
<h1>Visibility Toogle </h1>
<button>Show details</button>
</div>
);
ReactDOM.render(<a/>,document.getElementById('app'));
我在屏幕上看不到任何内容,只是一个空白页,但我更改了以下行现在很好
ReactDOM.render(a,document.getElementById('app'));
渲染我已经看到了语法,我知道第一个元素必须是 jsx 认为这也是 jsx 但我想知道为什么我失败了
2)我尝试使用 {a} 也失败了,这也是 javascript 方法失败的原因
最佳答案
您有两个问题。
第一个:React组件必须以大写开头,否则React认为它们是标准的HTML标签。
第二个:您没有渲染任何组件。 React 应用程序的根必须是一个组件。
因此将您的代码更改为:
const Ex = () =>
(
<div>
<h1>Visibility Toogle </h1>
<button>Show details</button>
</div>
);
ReactDOM.render(<Ex/>,document.getElementById('app'));
关于javascript - 将 React 中的组件渲染为变量与 jsx 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54096038/