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";