带有 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(您需要 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