javascript - 用React DOM节点实现jQuery操作dom写法应该怎么实现-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

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

大家讲道理 2017-04-11 12:03:08

[JavaScript讨论组]

529

1: 这是jQuery 的写法给

标签节点元素添加函数$("#qrcode").qrcode({}),如果用React要怎么实现？

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(
            
                

            
        )
    }
})
export default TwoDimensionCode

大家讲道理

光阴似箭催人老，日月如移越少年。

全部回复(1)

ringa_lee2017-04-11 12:05:08 1楼

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 (
        ...
        <p ref={(code) => $(code).qrcode(qcodeOption)}></p>
        ...
    );
}

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 <p />, you get the DOM node back; when attaching a ref to a composite component like <TextInput />, you'll get the React class instance.

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

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

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

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