將 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} 也我失敗了也是 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'));