React中的Dom操作

  使用场景

    下面是几个适合使用 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 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...