用React DOM节点实现jQuery操作dom写法应该怎么实现

1: 这是jQuery 的写法给<div id="qrcode"></div>标签节点元素添加函数$("#qrcode").qrcode({}),如果用React要怎么实现？

<body>
    <div id="qrcode">
        <div id="codeico"></div>
    </div>
</body>

  <script type="text/javascript">
        $(document).ready(function() {
            init()
        })
        function generateQRCode(rendermethod, picwidth, picheight, url) {
            $("#qrcode").qrcode({
                render: rendermethod, // 渲染方式有table方式（IE兼容）和canvas方式
                width: picwidth, //宽度
                height:picheight, //高度
                text: utf16to8(url), //内容
                typeNumber:-1,//计算模式
                correctLevel:2,//二维码纠错级别
                background:"#ffffff",//背景颜色
                foreground:"#000000"  //二维码颜色
            });
        }
        function init() {
            generateQRCode("table",200, 200, "测试");
            var margin = ($("#qrcode").height()-$("#codeico").height())/2;
            $("#codeico").css("margin",margin);
        }
        }
   </script>

2： React 实现，我是这样写的 React.findDOMNode(this.refs.code).qrcode({})报错
应该怎么实现呢

     const TwoDimensionCode = React.createClass({
    //组件挂载之前调用一次
    getInitialState :function(){
        return{
        }
    },
    componentDidMount: function(){
        React.findDOMNode(this.refs.code).qrcode({
                render: "table", // 渲染方式有table方式（IE兼容）和canvas方式
                width: 200, //宽度
                height:200, //高度
                text: utf16to8("测试"), //内容
                typeNumber:-1,//计算模式
                correctLevel:2,//二维码纠错级别
                background:"#ffffff",//背景颜色
                foreground:"#000000"  //二维码颜色 
            });
    },
    render(){
        var initStyle = {
            position:'fixed',
            color:'red',
            zIndex:'9999999',
            width:'30px',
            height:'30px',
            background:'url(../../src/image/uimg.png) no-repeat;'
        }
        return(
            <div>
                <div style={{initStyle}}><div ref="code"></div></div>
            </div>
        )
    }
})
export default TwoDimensionCode

componentDidMount

在生命周期中的这个时间点，组件拥有一个 DOM 展现，~~你可以通过 this.getDOMNode() 来获取相应 DOM 节点。~~(见更新)
如果想和其它 JavaScript 框架集成，使用 setTimeout 或者 setInterval 来设置定时器，或者发送 AJAX 请求，可以在该方法中执行这些操作。

render: function(){
    var qcodeOption = {
        render: "table", // 渲染方式有table方式（IE兼容）和canvas方式
        width: 200, //宽度
        height:200, //高度
        text: utf16to8("测试"), //内容
        typeNumber:-1,//计算模式
        correctLevel:2,//二维码纠错级别
        background:"#ffffff",//背景颜色
        foreground:"#000000"  //二维码颜色 
    };
    
    ...
    
    return (
        ...
        <div ref={(code) => $(code).qrcode(qcodeOption)}></div>
        ...
    );
}

React v0.15 更新：

The ref Callback Attribute

React v0.15 中弃用了 React.getDOMNode ，并提供了
ReactDOM.findDOMNode 但也不推荐使用，而是推荐使用 The ref Callback Attribute 这种方式，上文代码已做调整。

你说你直接写 this.refs.code 就能用是对的：

When attaching a ref to a DOM component like <div />, you get the DOM node back; when attaching a ref to a composite component like <TextInput />, you'll get the React class instance.

给 div 之类的 DOM 组件指定 ref ，就能这样直接获取，如果是 React 组件的话就不是了。

但是 ref 字符串属性也已经被当成遗留特征了，如果要考虑以后升级的话，应该尽量避免，而是使用上面的 ref 回调属性。

reactjs.cn 的文档还没更新是 v0.14 的，没有这部分内容，之前完全没注意到。。。

部分内容渣翻译，理信达雅还远得很，意会就好

【热门文章】