今天心血来潮,打开了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 深入系列1: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. git切换分支保存修改的代码的方法(转载)

    转自:http://www.tonitech.com/2344.html 最近在一个原有的项目上做一次非常大的改版,底层的数据库做了很大的变化,跟现在的版本无法兼容.现在的工作除了开发最新的版本之外还 ...

  2. E20180405-hm

    tutorial  n. 个别辅导时间; 教程,辅导材料; 使用说明书; 辅导课;  adj. 导师的; 私人教师的; 辅导的; track n. 小路,小道; 痕迹,踪迹; 轨道,音轨; 方针,路线 ...

  3. Ironpython 安装numpy包

    http://pytools.codeplex.com/wikipage?title=NumPy%20and%20SciPy%20for%20.Net https://www.enthought.co ...

  4. LuoguP1370 Charlie的云笔记序列 【dp】By cellur925

    题目传送门 题目大意:给你一个序列,求出它所有区间的本质不同的子序列个数.(空序列也算作本质不同),数据范围$1e5$. 我们肯定是不能一个个枚举区间的...而且这个复杂度下,也就大概$O(n)$或$ ...

  5. Ubuntu添加新用户,并且赋sudo权限

    https://blog.csdn.net/u012897374/article/details/78827359 sudo adduser username 接下来进入root用户,如果之前就没有普 ...

  6. elasticsearch映射 mapping

    mapping的格式个应用,主要是创建索引(数据库)的时候指明type 的field类型,然后elasticsearch可以自动解析

  7. 最短路之Dijkstra(迪杰斯特拉)

    一般用法: Dijkstra(迪杰斯特拉)算法是典型的单源最短路径算法,用于计算一个节点到其他所有节点的最短路径.主要特点是以起始点为中心向外层层扩展,直到扩展到终点为止.Dijkstra算法是很有代 ...

  8. java hashCode 作用

    hashCode 作用,对象根据hashCode的值分区域存放 /** * hashCode 作用 * * @author Administrator * */ public class Point ...

  9. zabbix被动模式和主动模式

    1 被动模式 zabbix默认采用被动模式.就是agent等待server采集数据. 在items中,type为zabbix agent就是指被动模式. 流程为:agent周期性收集数据,server ...

  10. IE css hack整理

    CSS hack由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozillafirefox等,对CSS的解析认识不一样,因此会导致生成的页面效果 ...