将 react 中的组件渲染为变量 vs jsx 组件

Question

以下代码取自 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 方法失败的原因

Answer 1

你有两个问题。

第一个：React 组件必须以大写开头，否则 react 认为它们是标准的 HTML 标签。

第二个：你没有渲染任何组件。 React 应用程序的根必须是一个组件。

因此，将您的代码更改为：

const Ex = () =>  
  (
    <div>
      <h1>Visibility Toogle </h1>
      <button>Show details</button>
  </div>
      );


ReactDOM.render(<Ex/>,document.getElementById('app'));