首页 > 其他 > 详细

React中的Dom操作

时间:2019-10-10 11:33:38      阅读:86      评论:0      收藏:0      [点我收藏+]

  使用场景

    下面是几个适合使用 refs 的情况

      1、处理焦点、文本选择或媒体控制

      2、触发强制动画

      3、集成第三方 DOM 库

 

  1. HTML元素
    <div ref={() => this.domName = React. createRef()}></div>
    
    // 修改dom样式
    this.domName.style.background = "pink";
  2. 组件元素和styledComponents样式化的元素
    // styledComponents样式化的元素
    const KillItem = styled.div`
        font-size: 16px;
        cursor: pointer;
        font-weight: 600;
    `;
    <KillItem innerRef={() => this.domName = React.createRef()} />
    
    // 修改dom样式
    this.domName.style.background = ‘pink‘;


    // 组件dom <Row type="flex" align="middle" innerRef={()=>this.domName = React.createRef()}></Row> // 修改dom样式 this.domName.style.background = "pink";

React中的Dom操作

原文:https://www.cnblogs.com/dadouF4/p/11646789.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!