开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >简单的ReactJS代码不起作用

问简单的ReactJS代码不起作用
EN

Stack Overflow用户

提问于 2017-09-28 00:59:16

回答 1查看 178关注 0票数 0

以下简单的ReactJS代码不起作用。新手需要帮助！

<html lang="en">
<head>
<meta charset="UTF-8">
<title>ReactJS Test</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="container"></div>

<script type="text/babel">
var currentLocation = window.location;
ReactDOM.render(
        <div>
            <p>currentLocation : {currentLocation}</p>
        </div>,
    document.getElementById('container')
);
</script>
</body>
</html>

Chrome控制台显示如下无助的错误消息：

react-dom.production.min.js:67 Uncaught Error: Minified React error #31; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=31&args[]=http%3A%2F%2Fxxxxxxx.com%3A8080%2F_test%2Fsitetest_new.jsp&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at m (react-dom.production.min.js:67)
    at qb (react-dom.production.min.js:82)
    at z (react-dom.production.min.js:87)
    at C (react-dom.production.min.js:89)
    at react-dom.production.min.js:94
    at g (react-dom.production.min.js:43)
    at f (react-dom.production.min.js:43)
    at beginWork (react-dom.production.min.js:48)
    at e (react-dom.production.min.js:18)
    at k (react-dom.production.min.js:19)

提前感谢！

EN

回答 1

Stack Overflow用户

发布于 2017-09-28 01:08:02

window.location返回一个对象。您不能在JSX中嵌入独立对象。您只能嵌入JavaScript expressions。

尝试使用JSON.stringify()将对象转换为字符串。

您可以运行下面的代码片段或查看此。

var currentLocation = window.location;

ReactDOM.render(
        <div>
            <p>currentLocation : {JSON.stringify(currentLocation)}</p>
        </div>,
    document.getElementById('container')
);

<div id="container"></div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

注意：如果你只想要一个来自window.location对象的字符串值(例如href)，你不需要JSON.stringify()。

您可以直接在JSX (或设置var currentLocation = window.location.ref;) - example中使用window.location.href。

票数 2

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46459344

复制

相关文章

ReactJS的简单介绍和使用

react javascript

一、React的家世背景 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。 Facebook的设计理念是独立、小巧、快速、创新，而React的特点也正说明了这一点。二、React 更“轻”的MDV框架先来说一下什么是MDV吧，MDV即Model Driven View，根据model动态生成view。MDV框架将程序员从传

lonelydawn

2018/02/09

1.4K0

ReactJS实现一个简单的评论列表

function render 函数

仔细观察，item 里的字段都来自外界，并非该组件，所以定义成无状态的 function 最好。

JavaEdge

2021/03/18

5670

最近在学习react js，ReactJS是Facebook开发的用于构建用户界面的JAVASCRIPT库，利用其可以实现组件式开发。

用户1394570

2018/08/08

1.3K0

react javascript

前言 React学习前先搭好环境，官网的例子看着比较分散。结合webpack就可以体验完整的es6开发流程了。源码：https://github.com/Ryan-Miao/hello-react-js/releases/tag/0.1 1. 环境搭建涉及以下几个技术。但从hello world的角度说，目前先不用知道是干嘛的，先用来学习react，后面再去研究各个组件的功能。 Webpack - A module bundler Babel - A Javascript compiler ES6 -

Ryan-Miao

2018/03/13

1.3K0

android 混淆不起作用,Android代码混淆的写法总结

c++java parcel 编程算法

Apk文件被反编译出来能被获取到里面的代码。对于这种情况，我们可以对项目代码进行混淆，随机生成难理解的类名，方法名，让代码难以阅读，加大功能被盗取的难度。混淆可以起到压缩Apk，混淆文件，预检，优化的作用。

全栈程序员站长

2022/09/01

3.3K0

isomorphic reactjs

node.js javascript 网站 react java

web应用从最早静态页面、到php后台框架输出、到mv*为主的SPA、到基于node中层的直出，目前有人提出web的下次改变可能将是基于isomorphic javascript的前后台同构应用。

IMWeb前端团队

2019/12/03

2.8K0

isomorphic reactjs

1、ReactJS简介 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。 2、ReactJS的背景和原理在Web开发中，我们总需要将变化的数据实时反应到UI上，这时

小胖

2018/06/27

4K0

isomorphic reactjs

isomorphic javascript web应用从最早静态页面、到php后台框架输出、到mv*为主的SPA、到基于node中层的直出，目前有人提出web的下次改变可能将是基于isomorphic

IMWeb前端团队

2017/12/29

1.8K0

isomorphic reactjs

ReactJS 学习——组件

React 提倡组件化的开发方式，每个组件只关心自己部分的逻辑，使得应用更加容易维护和复用。

李振

2021/11/26

1.1K0

ReactJS学习(四)

react javascript 腾讯云测试服务

组件是React中最重要也是最核心的概念，一个网页，可以被拆分成一个个的组件，像这样：

用户1289394

2023/01/06

8140

ReactJS学习(二)

redux react javascript apache

官方一句很简单的话，道出了什么是ReactJS，就是，一个用于构建用户界面的JavaScript框架，是Facebook开发的一款的JS框架。

用户1289394

2023/01/05

4.1K0

reactjs不常见的面试提要

react 数据结构

直接上内容: 首先是首页结构: <div> <C/> <B> <E/> <D/> </B> </div> 在index中有3个子组件,在3个组件的生命周期component

杭州前端工程师

2018/06/15

1.3K0

NodeJS和ReactJS,VUEJS的关系

node.js jvm mvc java ssh

网上找的科普贴，整理了一下发给大家，出处见底部链接。有许多类比的例子不太准确，大家参考下就行。

浩Coding

2019/08/26

6.2K0

NodeJS和ReactJS,VUEJS的关系

ReactJS 学习——入门

react html css javascript webpack

React 首次被提出是在2014年的 F8 大会上，当期的主题为 “Rethinking Web App Development at Facebook”，这也是 React 名字的由来。

李振

2021/11/26

1.6K0

ReactJS学习(一)

网站 mvc 数据处理 ajax

在第一个阶段中前端页面都是静态的，所有前端代码和前端数据都是后端生成的。前端只是纯粹的展示功能，js脚本的作用只是增加一些特殊效果，比如那时很流行用脚本控制页面上飞来飞去的广告。

用户1289394

2023/01/05

7430

ReactJS学习(三)

javascript html react

umi-plugin-react插件是umi官方基于react封装的插件，包含了13个常用的进阶功能。

用户1289394

2023/01/05

1K0

Reactjs 入门基础(一)

数据库 react

实例中我们引入了三个库： react.min.js 、react-dom.min.js 和 browser.min.js：　　1，react.min.js -React 的核心库　　2，react-dome.min.js - 提供与DOM 相关的功能。　　3，browser.min.js 用于将JSX 语法转化为JavaScript 语法。　　　ReactDOM.render( 　　　　　　<h1>Hello, world!</h1>, 　　　　　　document.getE

用户1197315

2018/01/22

2K0

使用reactJS要注意的地方

虽然react使用的jsx可以html和js混编，但是这里的html用的时候有的地方还是和原来的习惯不太一样。这里汇总一些我已经遇到的不一样，还有其他要注意的地方

黒之染

2018/10/19

5990

ReactJS Hook之useState

在 class 中，我们通过在构造函数中设置 this.state 为 { count: 0 } 来初始化 count state 为 0：

JavaEdge

2021/03/18

8640

简单代码的秘诀

jquery api 数据结构 javascript underscore

成为10倍开发人员有捷径可走吗？是否有这样一个神奇的秘密，可以帮助我们打开一个全新的软件开发精通和生产力世界？怀疑者们通常会说：“当然没有捷径可走！每个人都需要不断的练习才能变得更好！”

一只图雀

2020/11/04

5760

相似问题

ReactJS中简单的“Hello”不起作用

49

ReactJs:简单呈现表不起作用

17

简单ReactJS Javascript输入不起作用

23

简单的HTML代码到ReactJS的转换

13

ReactJS在代码中不起作用

10

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例