问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
mianwbq
    68722232

    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({})报错
    clipboard.png 应该怎么实现呢

         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
    javascriptreact
    阅读 5.4k
    1 个回答
    得票最新
    头像
    AlanZhang
      2.5k51432
      ✓ 已被采纳

      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 的，没有这部分内容，之前完全没注意到。。。

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

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题