Question

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

Answer 1

您有两个问题。

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

第二个：您不渲染任何组件。 React应用程序的根必须是组件。

因此将您的代码更改为：

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


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

将React中的组件呈现为vs.jsx组件

1 个答案: