今天心血来潮，打开了sublime想玩玩react，然后大家都知道的先引入一大串

就是在百度静态资源库里找到的。

然后贴html代码

对的，没错，就这么一行，毕竟只是测试嘛

然后js代码

大家一定要注意，在script的开头标签里，一定要注明，否则浏览器会报错，解析不了。

就按照这样的代码，照理来说应该没问题吧。

但是不知道为什么，浏览器就是出不来这样的效果。并且还给我报这样的错误

找了半天才发现，在react中的ReactDOM.render()方法中有两个参数，第一个是要渲染的组件，第二个必须要JS的原生对象。而我代码中使用的是jQ的对象，那怎么解决呢？

很简单  把代码由

改为

或者使用$(".mydiv").get(0)将其转换为原生js对象，就ok啦！

诶这个bug找了很久，很尴尬，以后要注意啦！

react随笔-1(为什么在react使用jq无法正确渲染组件位置)的更多相关文章

  1. 五分钟学习React(一)： 什么是React

    在前端的世界里,我们要处理的文件不是太多,而是太少.每天开发项目将html.css.js.图片.字体文件都像大杂烩一般加载都网页上.当应用变得越来越臃肿的时候,会发现js用了那么多全局变量,css的继 ...

  2. React 深入系列１：React 中的元素、组件、实例和节点

    文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中 ...

  3. react实战项目开发(2) react几个重要概念以及JSX语法

    前言 前面我们已经学习了利用官方脚手架搭建一套可以应用在生产环境下的React开发环境.那么今天这篇文章主要先了解几个react重要的概念,以及讲解本文的重要知识JSX语法 React重要概念 [思想 ...

  4. React 与 React Native 底层共识：React 是什么

    此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法,此小节主要介绍 React 的底层原理与 ...

  5. 利用 Create React Native App 快速创建 React Native 应用

    本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发 ...

  6. React:快速上手(6)——掌握React Router

    React:快速上手(6)——掌握React Router 引入Router 安装 npm install react-router-dom 基础组件 React Router中有三种类型的组件:路由 ...

  7. 2、手把手教React Native实战之从React到RN

    ###React简介 RN是基于React设计,了解React有助于我们开发RN应用: React希望将功能分解化,让开发变得像搭积木一样,快速而且可维护 React主要有如下3个特点: *作为UI( ...

  8. 【React】393 深入了解React 渲染原理及性能优化

    如今的前端,框架横行,出去面试问到框架是常有的事. 我比较常用React, 这里就写了一篇 React 基础原理的内容, 面试基本上也就问这些, 分享给大家. React 是什么 React是一个专注 ...

  9. 前端笔记之React（一）初识React&组件&JSX语法

    一.React项目起步配置 官网:https://reactjs.org/ 文档:https://reactjs.org/docs/hello-world.html 中文:http://react.c ...

随机推荐

  1. （水题）洛谷 - P1618 - 三连击（升级版）

    https://www.luogu.org/problemnew/show/P1618 枚举所有的A,最多 $A_9^3$ ,然后生成B和C(先判断是不是能够生成),判断有没有重复数字(比之前那个优雅 ...

  2. Mac下的常用终端命令与vim常用命令

    因为很少用命令行,老被鄙视,所以今天记录一下常用的命令行: cd 切换工作目录 . 表示当前目录 .. 表示当前目录的上一级目录 / 根目录/目录分隔符 ./ 当前目录 ../ 回到上一级目录 ls ...

  3. Educational Codeforces Round 12 A. Buses Between Cities

    题意: 从A到B的汽车每隔 a 分钟发车一次,从A到B要ta分钟. 从B到A汽车每隔b分钟发车一次,从B到A要ta分钟. Simion从A出发,问他在A->B的途中共遇到了多少辆车. 汽车都是从 ...

  4. 洛谷 P3711 仓鼠的数学题【伯努利数+多项式科技】

    有个东西叫伯努利数--一开始直接·用第一类斯特林推到自闭 式子来源:https://www.luogu.org/blog/ShadowassIIXVIIIIV/solution-p3711 https ...

  5. loj#2542. 「PKUWC2018」随机游走（树形dp+Min-Max容斥）

    传送门 首先,关于\(Min-Max\)容斥 设\(S\)为一个点的集合,每个点的权值为走到这个点的期望时间,则\(Max(S)\)即为走遍这个集合所有点的期望时间,\(Min(S)\)即为第一次走到 ...

  6. IT兄弟连 Java Web教程 经典案例2

    案例需求:写一个用户登录的html页面有账号和密码,并在登录的Servlet中获取登录的账号和密码,如果账号是abc密码是123则向浏览器输出登录成功,否则向浏览器输出登录失败. 案例实现: ●  h ...

  7. vbox虚拟机配置Redhat6.4本地yum源

    作为一个新手,配置这个yum源配了4天,遇到了各种问题,也按照网络上面一些方法在163上面下载CentOS6的yum源来替换Redhat本地的yum源,但是配置过程中,出现很多错误,发现直接在本地配置 ...

  8. python之使用request模块发送post和get请求

    import requestsimport json #发送get请求并得到结果# url = 'http://api.nnzhp.cn/api/user/stu_info?stu_name=小黑马 ...

  9. 维骨力Glucosamine的最关键的几点...

    1.每日劑量應為多少?長期服用安全嗎? 由於葡萄糖胺(Glucosamine)和軟骨素(Chondroitin)原來就存在於人體,是人體每天會生產製造的必需營養素,因此,一般認為服用此類產品的安全性相 ...

  10. UESTC - 878 温泉旅店 二维费用背包问题

    http://acm.uestc.edu.cn/#/problem/show/878 设dp[i][j][k]表示在前i个数中,第一个得到的异或值是j,第二个人得到的异或值是k的方案数有多少种. 因为 ...