javascript - 将 react 中的组件渲染为变量 vs jsx 组件
问题描述
以下代码取自 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()
我写的下面的代码
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} 也失败了 a 也是 javascript 方法,为什么它失败了
解决方案
你有两个问题。
第一个:React 组件必须以大写开头,否则 React 认为它们是标准的 HTML 标签。
第二个:您没有渲染任何组件。React 应用程序的根必须是一个组件。
因此,将您的代码更改为:
const Ex = () =>
(
<div>
<h1>Visibility Toogle </h1>
<button>Show details</button>
</div>
);
ReactDOM.render(<Ex/>,document.getElementById('app'));
推荐阅读
- node.js - 使用 node.js 读取 json 文件时出错
- python - 使用windows时如何在django中进行用户身份验证(windows不支持crypt模块)
- java - 如何在 Kotlin 中创建空类对象?
- python - 如何解决“RuntimeError: CUDA error: invalid device ordinal”?
- javascript - 固定手风琴面板宽度长度
- assembly - 如何在寄存器中的特定偏移处打印字符?
- java - Java 解析的 JSON 数组 (GSON) 返回零或 null
- python - dask是如何实现并行的?
- javascript - Highcharts中的堆叠条形图需要单个边框
- ios - 如何在 FirebaseCrashlytics iOS 最新升级中强制崩溃?