Question

我正在尝试获取一些基本的jsx，以便在常规的网络浏览器中显示一些文本。通过双击主要的html文件并在chrome中打开代码，firefox .....

在这些链接和几本书上，我一直关注a few intro tutorials。

This one是唯一在实际的Web浏览器中打开程序的方法。问题在于它不包括一些额外的东西，例如创建类和其他东西。

我似乎找不到我的代码未打印任何内容的原因

所需的输出

你好世界

在我正在使用的网络浏览器（Firefox）中打印

jsx / index.js

import React from 'react';
import { render } from 'react-dom';

class navBar extends React.Component {
    render() {
        return <div>Hello world</div>;
    }
}

render(<navBar />, document.body)

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>

        <script src="https://unpkg.com/react@16.8.4/index.js"></script>
        <script src="https://unpkg.com/react-dom@16.8.4/index.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.2/browser.min.js"></script>

        <meta charset="utf-8" name="viewport" content="user-scalable=no, width=device-width" />
    </head>

    <body>
        <script type='text/babel' src='jsx/index.js'></script>
    </body>
</html>

Answer 1

根据反应文档，您不应使用以小写字母开头的class/components名称。

将navBar更改为NavBar，您应该会很好。

此外，您不应将组件安装到body标签，因为某些第三方库可能会操纵页面的正文。

另外，请阅读开发人员工具中的控制台警告和错误，您将从那里获得基本答案。

Answer 2

您需要在index.html中使用ID为“ root”的容器，并且需要从“ react-dom”导入ReactDOM。另外，您还应该使用约定的大写字母（Navbar而不是navBar）来命名组件。比您的代码应如下所示：

import React from 'react';
import ReactDOM from 'react-dom';

class Navbar extends React.Component {
  render() {
    return <div>Hello world</div>;
  }
}

ReactDOM.render(<Navbar />, document.querySelector('#root'))

Answer 3

在jsx中

删除导入语句。

此外，在return语句中的div周围添加括号。

用大写字母命名组件（用NavBar代替navBar）

使用ReactDOM.render

为了安全起见

在html主体内创建一个Div，以将组件安装到该目录。这样可以防止第三方库操纵您的页面正文。

class NavBar extends React.Component {

    render() {
        return (
                <div>
                    Hello world
                </div>
        );
    }
}

ReactDOM.render(<NavBar />, document.querySelector('#root'))

在html 中使用https://unpkg.com/react@16/umd/react.development.js和https://unpkg.com/react-dom@16/umd/react-dom.development.js作为源脚本

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>

            <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
            <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
            <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
        <meta charset="utf-8" name="viewport" content="user-scalable=no, width=device-width" />
    </head>

    <body>
        <div id="root"></div>
        <script type='text/babel' src='jsx/index.js'></script>

    </body>
</html>

带有JSX和类的ReactJS'Hello World'对浏览器没有任何输出

3 个答案: