带有 JSX 和类的 ReactJS 'Hello World' 不会向浏览器打印任何内容

Posted

技术标签:

【中文标题】带有 JSX 和类的 ReactJS \'Hello World\' 不会向浏览器打印任何内容【英文标题】:ReactJS 'Hello World' with JSX and classes prints nothing to browser带有 JSX 和类的 ReactJS 'Hello World' 不会向浏览器打印任何内容 【发布时间】:2019-07-29 07:34:52 【问题描述】:

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

我和a few intro tutorials 一起关注了这些链接和几本书。

This one 是唯一一个似乎涉及在实际网络浏览器中打开程序的人。问题是它没有包括一些额外的东西,比如创建类和其他人所做的东西。

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


期望的输出

世界你好

在我使用的网络浏览器 (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>

【问题讨论】:

通常需要创建一个div,然后交给render函数。你的 React 版本太旧了,尝试更新到 16.8 @felixmosh 我很陌生。我是否正确更改了版本? 不,unpkg.com/react@16.8.0/umd/react.production.min.js unpkg.com/react-dom@16.8.0/umd/react-dom.production.min .js @Jacob 你能检查一次raw.githubusercontent.com/reactjs/reactjs.org/master/static/… 吗?这也是***.com/a/48879936/4061006 和你的导入,比如 import render from 'react-dom';所以 ReactDom.render ,这里是 ReactDOM 而不是 ReactDom,这里不需要 ReactDOM,只需 render(, document.querySelector('#root')) 就可以了 @Jayavel 对不起,我正在像你提到的那样导入 reactdom,我只是没有更新我的问题来显示它。您发布的 github 示例不使用类,在此示例中这对我来说似乎是一个大问题。我已经能够在不使用类的情况下创建一个 hello world。 github.com/jacobkrahn/jsxhelloworld 第二个例子看起来有点复杂。我会读一遍,但它更难理解。 【参考方案1】:

您需要 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'))

【讨论】:

我发布了一个更新,但它似乎没有帮助。您也可以发布您的html吗?另外,在我使用 document.body 之前。这还不够好吗? 你需要有 在你的身体在 html 那是反应呈现的地方 这似乎仍然没有帮助。你有这个正在使用的 html 吗?另外,我发布了一些更新的控制台错误。【参考方案2】:

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

navBar 更改为NavBar,您应该一切顺利。

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

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

【讨论】:

【参考方案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' 不会向浏览器打印任何内容的主要内容,如果未能解决你的问题,请参考以下文章

ReactJs - 将带有嵌套 React 组件的原始 HTML 转换为 JSX

reactjs学习--02

带有 ReactJS、Webpack 和 Babel 的 Hello World

JSX 代表啥?

带有id和类的标记

jsx: ReactJS if 条件