ReactJS 如何DOM 操作？
⼀ 获取DOM 元素
react 可以允许我们通过 ref 来定位⼀个组件。具体的做法是：
先给⼀个组件设置⼀个 ref=‘xxx’ 的属性，注意这个ref 必须是全局唯⼀的。
<input ref=‘city’ />
jquery是什么功能组件然后就可以通过 fs.city 来访问这个组件。
但是请注意，这⾥拿到的只是虚拟DOM ，⽽不是真实的DOM 。
只有在render ⽅法执⾏之后，并且react 已经完成了DOM 的更新，才能通过 DOMNode() 来拿到原⽣的DOM 元素。
如果你在react 更新DOM 之前这么做，很有可能拿到的是空的或者是旧的DOM 元素。
⼀般我们会在 componentDidMount 后者 事件回调中使⽤ getDOMNode ⽅法。
⼆ 整合⾮React 库
我们需要操作原⽣DOM 最常见的情况就是我们使⽤了其他的库进⾏DOM 操作。⽐如我们使⽤了jquery 的⼀个⾃动补全插件，他需要在原⽣DOM 上初始化。这个时候我们需要通过 getDOMNode() 拿到原⽣的DOM 并调⽤jquery 插件的初始化⽅法。
如下代码所⽰，我们有⼀个City 组件，它内部调⽤了jquery autocomplete 做了⾃动补全。在选中⼀个城市之后会log 出来。
这样做没什么问题，但是在City 中处理⼀个jquery 的⾃动补全插件是很烦⼈的⼀件事。⽽且，如果⾃动补全插件升级了你可能还需要去改City 组件的代码。假设我们没有⾜够的精⼒写⼀个基于React 的⾃动补全插件，我们更好的做法是把⾃动补全“包装”成⼀个 React 组件，如下所⽰，我们包装了⼀个 AC 组件：[javascript]
01. var  City = ateClass({  02. render: function () {  03. return  (  04. <input type="text" ref='city' />  05. );  06. },  07. onSelect: function (s) {  08. console.log("you have select: "+s.value);  09. },  10. componentDidMount: function () {  11. var  input = this .DOMNode();//拿到了原⽣DOM  12. $(input).autocomplete({  13. lookup: ["北京", "上海", "杭州"],  14. onSelect: this .onSelect  15. });  16. }  17. });
三 侵⼊式插件
上⾯的⾃动补全插件其实还算好，他没有改变DOM 元素，只是绑定了事件。
有些插件可能会直接改变你的DOM 元素，这样会导致 虚拟DOM 和原⽣DOM 不⼀致的问题。这个时候最好的做法就是不要在render ⽅法中渲染虚拟DOM 了，⽽是直接在 componentDidMount ⽅法中⾃⾏创建原⽣DOM 。但是注意请在 componentDidUnmount 中销毁你创建的DOM 。
不过要尽量避免这种情况，因为 Virtual DOM 才是 react 的精髓所在[javascript]
01. var  AC = ateClass({  02. render: function () {  03. return  (  04. <input type="text" name={this .props.name} />  05. );  06. },  07. onSelect: function (s) {  08. this .Select(s);  09. },  10. componentDidMount: function () {  11. var  input = this .getDOMNode();//拿到了原⽣DOM  12. $(input).autocomplete({  13. lookup: ["北京", "上海", "杭州"],  14. onSelect: this .onSelect  15. });  16. }  17. });  18.  19. //这样city 组件就可以直接使⽤AC 组件了。  20. var  City = ateClass({  21. render: function () {  22. return  (  23. <AC name='city' onSelect={this .onSelect}></AC>  24. );  25. },  26. onSelect: function (s) {  27. console.log("you have select: "+s.value);  28. }  29. });

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。