React中的Dom操作

  使用场景

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

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

      2、触发强制动画

      3、集成第三方 DOM 库

 

  1. HTML元素
    1
    2
    3
    4
    <div ref={() => this.domName = React. createRef()}></div>
     
    // 修改dom样式
    this.domName.style.background = "pink";
  2. 组件元素和styledComponents样式化的元素
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // 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';
    1
    2
    3
    4
    5
    // 组件dom
    <Row type="flex" align="middle"  innerRef={()=>this.domName = React.createRef()}></Row>
     
    // 修改dom样式
    this.domName.style.background = "pink";

posted @   大豆F4  阅读(250)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示