React.js怎么和jquery结合开发

#1

我想做一个react.js和jquery的结构。但是这2个结合的概念我很模糊,不知道如何下手?有哪位大神知道,求指导!

#2

我用 React.js 的原因就是为了能去掉 jQuery…

2 Likes
#3

问一下 就是鼠标移动到某个元素的时候,用reactjs怎么触发操作

#4


React 都支持的呀
http://reactjs.cn/

#5
  1. 熟悉react的生命周期, 比如componentDidMount

  2. 事件都是支持的

#6

有这样一个场景,就是打开一个页面,进去然后鼠标移动到一个div层上,这个时候react.js动态插入dom元素到这个div中去。如果用react.js实现怎么玩? 用jquery实现一般都是进入页面,先获得到div元素,然后对其绑定一个hover事件,当鼠标移动上去就会触发,但react.js实现方式我突然断线了,不知道怎么玩了?

#7

用React就不能用jQuery以DOM为核心的设计思路,React是声明式的我们要去声明在不同的时间点UI的形态,另外通过数据去改变也是数据驱动,React会管好剩下的事情。
比如,


var SomeComponent = React.createClass(function() {
    getInitialState() {
      return {show: false}
    },

   render() {
    return (
    <div onMouseOver={this._handleMouseOver}>{this.state.show ? <div></div> : null}</div>
    );
   },

 _handleMouseOver() {this.setState('show': true);}
});

类似这样的思路,或者直接控制css的display的none || block也行。

1 Like
#8

抱歉代码草草的写写,只体现下思路。

#9

楼主首先要学会使用模版引擎
然后, React 当中控制某一块 HTML 是否显示, 是通过数据控制的,
小的组件可是用个 true/false 控制, 很多个的话也可能是数组, 这里先说 true/false.
hover 的时候去改变这个值为 true, 然后重新渲染, React 会自动把界面变成添加了 div 以后的样子.

就是要注意一些, 以前用模版引擎, 这种琐碎的状态是没写到数据里交给模版渲染的,
到了 React 里这些琐碎的状态被放在 this.state 这个对象当中, 在渲染时被需要.

#10

这个早就会了。呵呵 我说的场景是在开发谷歌插件的情况下,去用react.js做一些插入dom元素的操作

#11

。。。。

#12

不够明确. content script 么. React 只能挂载组件到元素, 元素上边怎么插入用原生 js 去做.

#13

React不支持直接操作DOM,需要自己用HTML API
在组件内部使用$(this.getDOMNode())或者$(this.refs.[ref_name].getDOMNode())可以用jQuery
这种操作和React内部机制的关系就不了解了,需要接触DOM应该是设计有问题。

#14

是啊 react.js是对自己创建的组件内部添加一些事件,进行绑定。对外部的操作欠缺。

#15

在React里面可以使用refs来直接接触真实的DOM,因此在这个时候就可以使用jQuery来对真实DOM做一个包装来操纵DOM元素了

#16

如果外部的DOM不是React组建的,那么React没法去管理。

#17

是的 react.js的机制就是封装构建一个自己内部的js生态圈,对外部的操作关联不是很多

#18

去框架化,是react.js的核心思想,组件化来替代那些因开发环境受限制的框架,我个人觉得是未来前端架构的主要趋势,小巧精干,而不是被乱七八糟的js框架给束缚。

#19

相对于 React 来说 JavaScript DOM API 更像是低级语言, 没有清晰的抽象, 什么都能做. 都让做.

1 Like
#20

用react就可以抛弃jquery, 不要再用传统的思路,面向state不是面向dom