我想做一个react.js和jquery的结构。但是这2个结合的概念我很模糊,不知道如何下手?有哪位大神知道,求指导!
React.js怎么和jquery结合开发
stars
#6
有这样一个场景,就是打开一个页面,进去然后鼠标移动到一个div层上,这个时候react.js动态插入dom元素到这个div中去。如果用react.js实现怎么玩? 用jquery实现一般都是进入页面,先获得到div元素,然后对其绑定一个hover事件,当鼠标移动上去就会触发,但react.js实现方式我突然断线了,不知道怎么玩了?
hufeng
#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
jiyinyiyong
#9
楼主首先要学会使用模版引擎
然后, React 当中控制某一块 HTML 是否显示, 是通过数据控制的,
小的组件可是用个 true/false 控制, 很多个的话也可能是数组, 这里先说 true/false.
hover 的时候去改变这个值为 true, 然后重新渲染, React 会自动把界面变成添加了 div 以后的样子.
就是要注意一些, 以前用模版引擎, 这种琐碎的状态是没写到数据里交给模版渲染的,
到了 React 里这些琐碎的状态被放在 this.state
这个对象当中, 在渲染时被需要.
pinyin
#13
React不支持直接操作DOM,需要自己用HTML API
在组件内部使用$(this.getDOMNode())或者$(this.refs.[ref_name].getDOMNode())可以用jQuery
这种操作和React内部机制的关系就不了解了,需要接触DOM应该是设计有问题。