Question

我是React.js的新手并且通过遵循一些教程并完成我在index.js中所做的事情来尝试，但它没有显示我的代码的任何输出。

我使用这两个命令安装React并创建

npm install -g create-react-app

create-react-app helloworld

创建应用并仅在 Index.js 文件中执行以下代码，而不会干扰任何其他文件，但 H1 未显示在屏幕上。问题是什么，我做错了什么？

这是我的代码

Index.js

import React from 'react';
import ReactDOM from 'react-dom';

class worker extends React.Component{
    render()
    {
        console.log("hello");
        return(
            <h1> hello farrukh </h1>

        )
    }
}

ReactDOM.render(< worker /> , document.getElementById('root'))

的index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>

  </body>
</html>

Answer 1

来自：https://facebook.github.io/react/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized

当元素类型以小写字母开头时，它引用内置组件，如或，并产生字符串＆＃39; div＆＃39;或者＆＃39; span＆＃39;传递给React.createElement。以大写字母开头的类型，如编译为React.createElement（Foo），并对应于在JavaScript文件中定义或导入的组件。

我们建议使用大写字母命名组件。如果你有一个以小写字母开头的组件，在将它用于JSX之前将其分配给大写变量。

您需要做的就是重命名＆＃39; worker＆＃39;对工人＆＃39;它会起作用。

React.js输出未显示

1 个答案: