React中的Dom操作
使用场景
下面是几个适合使用 refs 的情况
1、处理焦点、文本选择或媒体控制
2、触发强制动画
3、集成第三方 DOM 库
- HTML元素
1234<div ref={() =>
this
.domName = React. createRef()}></div>
// 修改dom样式
this
.domName.style.background =
"pink"
;
- 组件元素和styledComponents样式化的元素
12345678910// 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'
;
12345// 组件dom
<Row type=
"flex"
align=
"middle"
innerRef={()=>
this
.domName = React.createRef()}></Row>
// 修改dom样式
this
.domName.style.background =
"pink"
;
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步