精华内容
下载资源
问答
  • Refs

    2019-03-26 23:35:13
    文章目录RefsRefs是什么Refs作用Refs的使用创建 Refs1. 使用 React.createRef() 创建 refs2. 回调形式创建 refsRefs知识点 ReactNative系列-文章 Refs Refs是什么 Refs 提供一种访问在render方法中DOM节点...


    ReactNative系列-文章

    Refs

    Refs是什么

    Refs 提供一种访问在render方法中DOM节点或者React元素的方式。

    Refs作用

    你可以通过它获得DOM节点或者React元素。一般用在处理焦点,文本选择,触发动画,触发方法等。例如,有一个CheckBox组件,你可以通过Refs获得该React元素,然后主动触发它的onClick方法:

    <TouchableOpacity onPress={()=>{
        this.cb.onClick();
      }>
      <CheckBox ref={(c)=>{
          this.cb = c;
        }}
        onClick={()=>{
          console.log(‘clicked’);
        }}
      >
      </CheckBox>
    </TouchableOpacity>
    

    Refs的使用

    创建 Refs

    1. 使用 React.createRef() 创建 refs

    class MyComponent extends React.Component {
      constructor(props) {
        this.myRef = React.createRef();
      }
      render() {
        return(
          <div ref={this.myRef}/>
        )
      }
    }
    

    可以使用current属性,对节点的引用进行访问。

    class CustomTextInput extends React.Component {
      constructor(props) {
        super(props);
        // 创建 ref 存储 textInput DOM 元素
        this.textInput = React.createRef();
        this.focusTextInput = this.focusTextInput.bind(this);
      }
    
      focusTextInput() {
        // 直接使用原生 API 使 text 输入框获得焦点
        // 注意:通过 "current" 取得 DOM 节点
        this.textInput.current.focus();
      }
    
      render() {
        // 告诉 React 我们想把 <input> ref 关联到构造器里创建的 `textInput` 上
        return (
          <div>
            <input
              type="text"
              ref={this.textInput} />
              
            <input
              type="button"
              value="Focus the text input"
              onClick={this.focusTextInput}
            />
          </div>
        );
      }
    }
    

    React 会在组件加载时将 DOM 元素传入 current 属性,在卸载时则会改回 null。ref 的更新会发生在componentDidMount 或 componentDidUpdate 生命周期钩子之前。

    2. 回调形式创建 refs

    <TouchableOpacity onPress={()=>{
        this.cb.onClick();
      }>
      <CheckBox ref={(c)=>{
          this.cb = c;
        }}
        onClick={()=>{
          console.log(‘clicked’);
        }}
      >
      </CheckBox>
    </TouchableOpacity>
    

    Refs知识点

    1. 不要过度使用Refs,如果可以通过声明实现,则尽量避免使用refs;
    2. 不能在函数式组件上使用ref属性(就是function定义的组件,不是class),因为它们没有实例;
    3. ref 的更新会发生在componentDidMount 或 componentDidUpdate 生命周期钩子之前。所以不能在组件卸载的时候直接使用ref的react元素,React 会在组件卸载时将ref 改回 null。
    展开全文
  • react refs

    2019-09-27 19:41:43
    Refs (16.9.0) Refs提供了一种方式,允许我们访问DOM节点或在render方法中创建的React元素。 使用场景 管理焦点,文本选择或媒体播放。例如:新页面打开可以通过refs去显示的将鼠标聚焦于input输入框。 触发...

    Refs (16.9.0)

    Refs提供了一种方式,允许我们访问DOM节点或在render方法中创建的React元素。

    使用场景

    管理焦点,文本选择或媒体播放。例如:新页面打开可以通过refs去显示的将鼠标聚焦于input输入框。
    触发强制动画。这种方式还没有遇到过。
    集成第三方DOM库。例如富文本编辑框,需要通过ref方式获取到富文本编辑框的文本内容。
     

    普通使用

    创建Refs

    this.myRef = React.createRef();

    绑定Refs

    <Child ref={this.myRef} />

    访问Refs

    this.myRef.current

    Refs转发

    官方给的方式就不写,这里就写一下官方没写的class组件的方式

    import React from 'react';
    
    // css & img
    
    // 公共组件 & 方法
    
    // 业务组件
    
    // service & 枚举数据
    
    class Child extends React.Component {
    
      /* -------------------------------------------- 生命周期函数 -------------------------------------------- */
    
    
      /* -------------------------------------------- 数据处理方法 -------------------------------------------- */
    
    
      /* -------------------------------------------- 纯函数组件 ------------------------------------------------- */
    
    
      /* -------------------------------------------- 页面操作方法 -------------------------------------------- */
    
    
      /* -------------------------------------------- Popover内容相关代码 ------------------------------------- */
    
    
      /* -------------------------------------------- 渲染函数 ------------------------------------------------  */
    
      render() {
        console.log('子组件render');
        debugger
        return <input type="text" placeholder="Hello World" ref={this.props.innerRef} />
      }
    }
    
    export default React.forwardRef((props, ref) => <Child 
      innerRef={ref} {...props}
    />);
    

     

    回调Refs

        this.myRef = element => {
          this.textInput = element;
        };
    this.textInput

     

    展开全文
  • VUE中$refs的基本用法

    万次阅读 多人点赞 2019-03-06 17:12:52
     1、ref 加在普通的元素上,用this.$refs.(ref值)获取到的是dom元素  2、ref 加在子组件上,用this.$refs.(ref值) 获取到的是组件实例,可以使用组件的所有方法。在使用方法的时候直接this.$refs.(ref值)....

    ref 有三种用法:

      1、ref 加在普通的元素上,用this.$refs.(ref值) 获取到的是dom元素

      2、ref 加在子组件上,用this.$refs.(ref值) 获取到的是组件实例,可以使用组件的所有方法。在使用方法的时候直接this.$refs.(ref值).方法() 就可以使用了。

      3、如何利用 v-for 和 ref 获取一组数组或者dom 节点

    应注意的坑:

    1、如果通过v-for 遍历想加不同的ref时记得加 :号,即 :ref =某变量 ;
    这点和其他属性一样,如果是固定值就不需要加 :号,如果是变量记得加 :号。(加冒号的,说明后面的是一个变量或者表达式;没加冒号的后面就是对应的字符串常量(String))

    2、通过 :ref =某变量 添加ref(即加了:号) ,如果想获取该ref时需要加 [0],如this.$refs[refsArrayItem] [0];如果不是:ref =某变量的方式而是 ref =某字符串时则不需要加,如this.$refs[refsArrayItem]。

    1、ref 需要在dom渲染完成后才会有,在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用,或者在 this.$nextTick(()=>{}) 中调用

    2、如果ref 是循环出来的,有多个重名,那么ref的值会是一个数组 ,此时要拿到单个的ref 只需要循环就可以了。

    例子1:

    添加ref属性

    <div id="app">
        <h1 ref="h1Ele">这是H1</h1>
        <hello ref="ho"></hello>
     
        <button @click="getref">获取H1元素</button>
    </div>

    获取注册过 ref 的所有组件或元素

    methods: {
            getref() {
              // 表示从 $refs对象 中, 获取 ref 属性值为: h1ele DOM元素或组件
               console.log(this.$refs.h1Ele.innerText);
               this.$refs.h1ele.style.color = 'red';// 修改html样式
     
              console.log(this.$refs.ho.msg);// 获取组件数据
              console.log(this.$refs.ho.test);// 获取组件的方法
            }
          }

    例子2:

    Vue代码:

     <!-- 列表部分 -->
                    <el-table @sort-change="sortChange" ref="multipleSelection" border :data="valueDryGoodTableData" style="width: 100%">
                        <el-table-column align="left" prop="title" label="标题" min-width="80%" sortable="custom">
                            <template slot-scope="scope">
                                <a target="_blank" :class="scope.row.titleClicked?'titleClicked':''" class="hoverHand bluetext" v-html="scope.row.title" @click="titleClick(scope.row.articleUrl,scope.$index)">
                                </a>
                            </template>
                        </el-table-column>
                        <el-table-column align="left" prop="releaseTime" label="发布日期" min-width="11%" sortable="custom"></el-table-column>
                        <el-table-column align="center" label="操作" min-width="9%">
                            <template slot-scope="scope">
                                <span class="operatoryTools">
                                    <i title="取消收藏" v-if="scope.row.isFavour" @click="favoriteOperating(scope.row.id, scope.$index)" class="hoverHand iconStyle el-icon-star-on"></i>
                                    <i title="收藏" v-else @click="favoriteOperating(scope.row.id, scope.$index)" class="hoverHand iconStyle el-icon-star-off"></i>
                                    <i title="分享" @click.stop="showShareOperation(scope.$index)" class="shareTarg iconfont">&#xe678;</i>
                                    <div class="share" v-if="scope.row.showShare">
                                        <img class="hoverHand shareItem" title="分享到微博" @click="shareItem('sina',$event);" src="@/images/WEIBO.png">
                                        <img class="hoverHand shareItem" title="分享到微信" @click.stop="shareItem('wx',$event);" src="@/images/WEIXIN.png">
                                        <img class="hoverHand shareItem" title="分享到QQ" @click="shareItem('qq',$event);" src="@/images/QQ.png">
                                    </div>
                                    <div v-show="scope.row.erweimaShare" class="erweima_share"></div>
                                    <div v-show="scope.row.erweimaShare1" class="erweima_share1"></div>
                                </span>
                            </template>
                        </el-table-column>
                    </el-table>

    JS代码:

    //点击清空条件,调用该方法
    emptyAndSearch(){//清空条件方法
    			//清空树选中状态
    			this.clearTreeNodeCheck(['tree']);
    			//清除排序
    			this.$refs.multipleSelection.clearSort();
    			//设置分页参数
    			this.queryParam = {
    				startRow : 1,
                    pageSize : 20,
                    condition:{
                    }
    			}
    			//分页查询调用
    			this.confirmSearch('statistics');
    			//设置清空条件为false
    			this.$store.commit('valueDryGoodDatas/SET_CLEAR_ALL',false);
    		}

    例子3:

    Vue代码:

     <el-form-item
                              ref="goodPicInfoFormpicUrl"
                              :label="$t('许可证证照')"
                              class="is-required"
                              prop="picUrl">
                              <el-upload
                                :show-file-list="false"
                                :http-request="uploadImg"
                                :data="certImgform"
                                action=""
                                class="avatar-uploader">
                                <img
                                  v-if="queryFrom.picUrl"
                                  :src="queryFrom.picUrl"
                                  class="avatar">
                                <i
                                  v-else
                                  class="el-icon-plus avatar-uploader-icon"/>
                              </el-upload>
                              <el-button
                                type="primary"
                                plain
                                size="mini"
                                @click="viewPcPic(queryFrom.picUrl)">{{ $t('查看') }}</el-button>
                            </el-form-item>

    JS代码:

          //获取元素清除验证
                  this.$refs.goodPicInfoFormpicUrl.clearValidate()

    一般来讲,想获取INPUT框,首先在获取DOM元素,需document.querySelector(".input1")获取这个dom节点,然后在获取input1的值。

    但是用ref绑定之后,我们就不需要在获取dom节点了,直接在上面的input上绑定input1,然后$refs里面调用就行。

    然后在javascript里面这样调用:this.$refs.input1  这样就可以减少获取dom节点的消耗了

     

     

    展开全文
  • npm install --save use-dynamic-refs 用法 import React , { useEffect } from 'react' ; import useDynamicRefs from 'use-dynamic-refs' ; const Example = ( ) => { const foo = [ 'random_id_1' , 'random_id...
  • React16.3中的Refs和Forwarding Refs

    万次阅读 2018-04-19 19:57:27
    简要介绍:React16.3中修改了Refs的使用方法,并且提供了Forwarding Refs用于在父组件中操作子组件中的dom节点,本文介绍一下新的Refs表示方法以及Forwarding Refs。 Ref的功能就不具体说了,就是在父组件中直接...

    简要介绍:React16.3中修改了Refs的使用方法,并且提供了Forwarding Refs用于在父组件中操作子组件中的dom节点,本文介绍一下新的Refs表示方法以及Forwarding Refs。

    Ref的功能就不具体说了,就是在父组件中直接操作子组件的方法,Ref的方式,使其脱离了props传值,然后更新子组件的标准方法。

    1 . React16.3中的Refs

    (1)创建

    16.3版本中Refs通过React.createRef()的方法创建,通过ref属性关联,比如我们创建一个Child子组件,并在该组件中使用Ref:

    class Child extends React.Component{
      constructor(props){
        super(props);
        this.myRef=React.createRef();
        //React16.3中创建Ref的方法
      }
      render(){
        return <input ref={this.myRef}/>
      }
    }

    上述是创建Ref指向的方法,在Ref所指向的组件,在render后就可以调用,React16.3中提供了current属性,用于引用render后的节点:

      componentDidMount(){
        console.log(this.myRef.current);
        //render之后就可以输出该ref指向的那个节点
      }

    此外,同样的Ref所指向的节点可以是dom节点,也可以是类组件。

    (2)Ref属性指向的节点不能是函数组件

    因为我们通过ref获得的组件,包含了声明周期和state,因此ref所指向的组件不可以是函数组件。

    function MyFunctionComponent(){
      return <div>1</div>
    }
    class Child extends React.Component{
      constructor(props){
        super(props);
        this.myRef=React.createRef();
      }
      render(){
        return <MyFunctionComponent ref={this.myRef}/>
        //报错Warning: Stateless function components 
        //cannot be   given refs. Attempts to access this 
        //ref will fail.
      }
    }

    但是在函数组件中,是可以通过ref的方式指向一个类组件或者dom节点的。

    2 .暴露子组件中的dom节点给父组件

    (1)使用场景

    在某些场景中, 我们可能需要在一个父组件中操作自组件中的dom节点,结构层级为:

    父组件——>子组件——>子组件中的DOM节点

    我们想在父组件中,直接操作子组件中的dom节点,这种操作不是很推荐,因为可能破坏了组件的封装性,标准的父子组件通信一般是通过Props传值的形式,但是有些时候有这种直接操作dom节点的需求,比如需要使dom节点聚焦,在父组件中需要知道子组件中某个dom节点的位置等等情况。

    此时,如果我们仅仅在父组件中,在子组件的引用上,增加属性ref,那么这个ref仅仅指向的是子组件,而不能知道子组件中的dom节点,举例来说:

    子组件为:

    class Child extends React.Component{
      constructor(props){
        super(props);
      }
      render(){
        return <input />
      }
    }

    父组件中,ref:

    class Father extends React.Component{
      constructor(props){
        super(props);
        this.myRef=React.createRef();
      }
      componentDidMount(){
        console.log(this.myRef.current);
      }
      render(){
        return <Child ref={this.myRef}/>
      }
    }

    输出的myRef为:

    Child {props: {…}, context: {…}, refs: {…}, updater: {…}, _reactInternalFiber: FiberNode, …}

    也就是说指向的是子组件,而不能指向子组件中的dom节点。

    (2)React16.3中的Forwarding refs

    通过React16.3中的Forwarding refs可以使得在父组件中可以得到子组件中的dom节点。

    Forwarding refs中提供了一个React.forwardRef来创建组件,在React.forwardRef的方法中传递了参数ref,通过这个ref可以指向具体的某一个dom节点。具体的指向流程为:

    父组件myRef——>React.forwardRef中的实参——>通过forwardRef方法创建的子组件中的ref——>指向子组件中的某一个dom节点

    举例来说:

    子组件(通过forwardRef方法创建)

    const Child=React.forwardRef((props,ref)=>(
      <input ref={ref} />
    ));

    父组件:

    class Father extends React.Component{
      constructor(props){
        super(props);
        this.myRef=React.createRef();
      }
      componentDidMount(){
        console.log(this.myRef.current);
      }
      render(){
        return <Child ref={this.myRef}/>
      }
    }
    

    此时的myRef输出为:

    input

    我们一步步来看上述的过程是如何发生的。

    • 首先在Father组件中通过React createRef的方式创建一个myRef
    • 将myRef在子组件Child中通过制定ref={myRef}的形式传递下去
    • 在子组件的构造方法中,会接受传递过来的ref作为实参,然后这个实参的ref可以复制给子组件中的dom节点等。
    • 当父组件的myRef关联相应的dom节点之后,就可以通过current属性在父组件中得到子组件的dom节点。

    (3)在高阶组件HOC中的Forwarding Refs

    我们来创建一个简单的HOC:

    function logProps(WrappedComponent) {
      class logProps extends React.Component {
        render() {
          return <WrappedComponent {...this.props} />;
        }
      }
    
      return logProps;
    }

    这个HOC,用于构建一个新组件,在新组建中可以输出传入组件的所有属性信息。

    我们令Child组件为:

    class Child extends React.Component{
      constructor(props){
        super(props);
      }
      render(){
        return <input />
      }
    }

    我们在Child组件的基础上,通过logProps生成一个高阶组件:

    const logProps=logProps(Child);

    在父组件中通过ref获取子组件:

    class Father extends React.Component{
      constructor(props){
        super(props);
        this.myRef=React.createRef();
      }
      componentDidMount(){
        console.log(this.myRef.current);
      }
      render(){
        return <LogProps ref={this.myRef}/>
      }
    }
    

    此时输出的是LogProps而不是Child,父组件的myRef指向的是HOC生成的组件。

    LogProps {props: {…}, context: {…}, refs: {…}, updater: {…}, _reactInternalFiber: FiberNode, …}

    同样的,如果我们想要父组件中的myRef指向HOC的原始组件,那么需要改写HOC的构造函数:

    function logProps(Component) {
      class LogProps extends React.Component {
        componentDidUpdate(prevProps) {
          console.log('old props:', prevProps);
          console.log('new props:', this.props);
        }
    
        render() {
          const {forwardedRef, ...rest} = this.props;
    
          // Assign the custom prop "forwardedRef" as a ref
          return <Component ref={forwardedRef} {...rest} />;
        }
      }
    
      // Note the second param "ref" provided by React.forwardRef.
      // We can pass it along to LogProps as a regular prop, e.g. "forwardedRef"
      // And it can then be attached to the Component.
      return React.forwardRef((props, ref) => {
        return <LogProps {...props} forwardedRef={ref} />;
      });
    }

    此时,输出的myRef为:

    Child

    此外,虽然React中通过React.createRef()的方式来创建ref,但是并没有废除回调的方式来创建ref的方法。

    展开全文
  • ReFS文件系统逆向工程

    2020-03-02 10:23:34
    详细描述了refs文件系统逆向工程的技术细节,refs是微软的新一代文件系统,是闭源的,因此逆向工程将您带入到refs文件系统结构的神秘世界.
  • Vue与ref属性与refs

    万次阅读 多人点赞 2018-05-25 18:31:04
    引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例注意:只要想要在Vue中直接操作DOM元素,就必须用ref属性进行注册实例:这里...
  • REFS3000注册机

    2013-02-22 20:43:25
    REFS3000注册机
  • Vue教程(ref和$refs的使用)

    万次阅读 多人点赞 2019-08-02 17:55:08
      在Vue中一般很少会用到直接操作DOM,但不可避免有时候需要用到,这时我们可以通过ref和$refs这两个来实现,本文我们就来详细的介绍下这个内容 ref    ref 被用来给元素或子组件注册引用信息, 引用信息将会...
  • skeemas-json-refs 用于解析轻量级解决方案 安装 npm install skeemas-json-refs 用法 var jsonRefs = require ( 'skeemas-json-refs' ) , refs = jsonRefs ( ) ; refs . add ( '/some/uri/ref' , { nested : {...
  • Resilient File System (ReFS)

    2020-03-02 10:27:49
    另一个详细描述了refs底层的数据结构和算法,对研究refs文件系统的人有帮助.微软的refs文件是应用在服务器上的全新文件系统.
  • React Refs

    2019-03-29 11:34:43
    React 支持一种非常特殊的属性Ref,你可以用来绑定到 ...1.字符串 refs 使用方法 绑定一个 ref 属性到 render 的返回值上: <input ref="myInput" /> 在其它代码中,通过 this.refs 获取支撑实例: var inp...
  • this.$refs

    万次阅读 多人点赞 2019-11-04 14:03:31
    给组件加 ref 打印结果 this.$refs.comp 是 vue...可以通过 $refs 得到组件,进而调用组件的变量和方法,如 this.$refs.comp.value 拿到了组件内部变量 value 值。所以可以通过 ref 操纵组件上的内容(推荐用 props ...
  • React Refs用法

    千次阅读 2018-04-25 17:14:48
    Refs介绍 Refs提供了一种访问在render方法中创建的DOM节点或者React元素的方法。在典型的数据流中,props是父子组件交互的唯一方式,想要修改子组件,需要使用新的pros重新渲染它。凡事有例外,某些情况下我们...
  • 主要介绍了React组件refs的使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • git中refs/for 和refs/heads

    万次阅读 2017-08-10 11:58:36
    简单点说,就是refs/for/mybranch需要经过code review之后才可以提交;refs/heads/mybranch不需要code review。如: 如果需要code review,直接push$git push origin master那么就会有“! [remote rejected] master...
  • git中refs/for & refs/heads

    千次阅读 2020-03-05 17:28:27
    refs/for/[branch] 需要经过code review之后才可以提交,而refs/heads/[beanch]不需要code review。 举例 如果需要code review,若直接执行push: git push origin mybrach 就会报错“! [remote rejected] ...
  • refs
  • Vue中$refs的用法详解

    2020-08-27 07:58:02
    主要介绍了Vue中$refs的用法,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
  • 想动态获取$refs,我们可以用模板字符串来动态绑定ref的值。代码如下: this.$refs[`${this.treeQueFlag?"treeSearch":"treeAll"}`].setCheckedNodes([]);
  • 本篇文章主要介绍了React中的refs的使用教程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • refs的使用

    2021-06-26 12:04:40
    当用到element-ui中的方法时,需要在标签中写上:ref="引用名" 使用的时候this.$refs.引用名.方法 ,就可以调用element-ui中的方法
  • react Refs使用

    2020-02-17 20:16:52
    //Refs使用,绑定dom元素,ref 不能设置在无状态组件上 //不要在 render 或者 render 之前访问 refs import React, { Component } from 'react'; class Refsdemo extends Component { constructor(props) { super...
  • 1.这个不是git的规则,而是gerrit的规则, 2.Branches, remote-...比如remote branch: origin/git_int(=refs/remotes/origin/git_int),local tag: v2.0(=refs/tags/v2.0),local branch: git_int(=refs/hea...
  • 了解一下Refs

    2018-10-21 13:23:31
    Refs提供了一种访问DOM节点或在render方法中创建的React元素的方法。 refs是React组件中非常特殊的props,可以附加在任何一个组件上。组件被调用时会新建一个该组件的实例,而refs就会指向这个实例。 在react\lib\...
  • Refs微信小程序weui元件库,Refs微信小程序weui元件库Refs微信小程序weui元件库Refs微信小程序weui元件库Refs微信小程序weui元件库Refs微信小程序weui元件库

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 106,438
精华内容 42,575
关键字:

refs