react怎么添加动态html(react中的DOM操作实现)
react怎么添加动态html
react中的DOM操作实现目录
- 前面的话
- 使用场景
- ref
- 【HTML元素】
- 【类组件】
- 【函数式组件】
- 【对父组件暴露DOM节点】
- 非受控组件
- 【默认值】
- ReactDOM
- 【render()】
- 【unmountComponentAtNode()】
- 【findDOMNode()】
- 新ref
某些情况下需要在典型数据流外强制修改子代。要修改的子代可以是 React 组件实例,也可以是 DOM 元素。这时就要用到refs来操作DOM
使用场景下面是几个适合使用 refs 的情况
1、处理焦点、文本选择或媒体控制
2、触发强制动画
3、集成第三方 DOM 库
如果可以通过声明式实现,则尽量避免使用 refs
[注意]不要在 Dialog 组件上直接暴露 open() 和 close() 方法,最好传递 isOpen 属性
refReact 支持给任意组件添加特殊属性。ref 属性接受一个回调函数,它在组件被加载或卸载时会立即执行
[注意]在组件mount之后再去获取ref。componentWillMount和第一次render时都获取不到,在componentDidMount才能获取到
【HTML元素】
当给 HTML 元素添加 ref 属性时,ref 回调接收了底层的 DOM 元素作为参数
React 组件在加载时将 DOM 元素传入 ref 的回调函数,在卸载时则会传入 null。ref 回调会在componentDidMount 或 componentDidUpdate 这些生命周期回调之前执行。
class CustomTextInput extends React.Component { constructor(props) { super(props); this.focus = this.focus.bind(this); } focus() { this.textInput.focus(); } render() { return ( <li> <input type="text" ref={(input) => { this.textInput = input; }} /> <input type="button" value="Focus the text input" onClick={this.focus} /> </li> ); } }
更简短的写法如下
ref={input => this.textInput = input}
【类组件】
当 ref 属性用于使用 class 声明的自定义组件时,ref 的回调接收的是已经加载的 React 实例
class AutoFocusTextInput extends React.Component { componentDidMount() { this.textInput.focusTextInput(); } render() { return ( <CustomTextInput ref={(input) => { this.textInput = input; }} /> ); } }
[注意]这种方法仅对 class 声明的 CustomTextInput 有效
【函数式组件】
不能在函数式组件上使用 ref 属性,因为它们没有实例
【对父组件暴露DOM节点】
在子节点上暴露一个特殊的属性。子节点将会获得一个函数属性,并将其作为 ref 属性附加到 DOM 节点。这允许父代通过中间件将 ref 回调给子代的 DOM 节点
该方法适用于类组件和函数式组件
function CustomTextInput(props) { return ( <li> <input ref={props.inputRef} /> </li> ); } class Parent extends React.Component { render() { return ( <CustomTextInput inputRef={el => this.inputElement = el} /> ); } }
在上面的例子中,Parent 将它的 ref 回调作为一个特殊的 inputRef 传递给 CustomTextInput,然后 CustomTextInput 通过 ref 属性将其传递给 <input>。最终,Parent 中的 this.inputElement 将被设置为与 CustomTextInput 中的 <input> 元素相对应的 DOM 节点
非受控组件要编写一个非受控组件,而非为每个状态更新编写事件处理程序,可以使用 ref 从 DOM 获取表单值
[注意]可能通过e.target.value取得DOM值,而不用绑定react
class NameForm extends React.Component { constructor(props) { super(props); this.handleSubmit = this.handleSubmit.bind(this); } handleSubmit(event) { alert('A name was submitted: ' + this.input.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="text" ref={(input) => this.input = input} /> </label> <input type="submit" value="Submit" /> </form> ); } }
由于非受控组件将真实数据保存在 DOM 中,因此在使用非受控组件时,更容易同时集成React和非React代码
【默认值】
在 React 的生命周期中,表单元素上的 value 属性将会覆盖 DOM 中的值。使用非受控组件时,通常希望 React 可以为其指定初始值,但不再控制后续更新。要解决这个问题,可以指定一个 defaultValue 属性而不是 value
render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input defaultValue="Bob" type="text" ref={(input) => this.input = input} /> </label> <input type="submit" value="Submit" /> </form> ); }
同样,<input type="checkbox"> 和 <input type="radio"> 支持 defaultChecked,<select> 和 <textarea> 支持 defaultValue
ReactDOMreact-dom这个软件包提供了针对DOM的方法,可以在应用的顶级域中调用,也可以在有需要的情况下用作跳出React模型的出口。但大部分组件都不应该需要使用这个包
render() unmountComponentAtNode() findDOMNode()
【render()】
ReactDOM.render( element, container, [callback] )
渲染一个React元素,添加到位于提供的container里的DOM元素中,并返回这个组件的一个 引用 (或者对于无状态组件返回null)
如果这个React元素之前已经被渲染到container里去了,这段代码就会进行一次更新,并且只会改变那些反映元素最新状态所必须的DOM元素
【unmountComponentAtNode()】
ReactDOM.unmountComponentAtNode(container)
从DOM元素中移除已挂载的React组件,清除它的事件处理器和state。如果容器内没有挂载任何组件,这个函数什么都不会干。 有组件被卸载的时候返回true,没有组件可供卸载时返回 false
【findDOMNode()】
ReactDOM.findDOMNode(component)
如果这个组件已经被挂载到DOM中,函数会返回对应的浏览器中生成的DOM元素 。需要从DOM中读取值时,比如表单的值,或者计算DOM元素的尺寸,这个函数会非常有用。 大多数情况下,可以添加一个指向DOM节点的引用,从而完全避免使用findDOMNode 这个函数。当 render 返回 null 或者 false 时, findDOMNode 也返回 null
版本16.3 之前,React 有两种提供 ref 的方式:字符串和回调,因为字符串的方式有些问题,所以官方建议使用回调来使用 ref。而现在引入的 createRef API,据官方说是一种零缺点的使用 ref 的方式,回调方式也可以让让路了
class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } render() { return <li ref={this.myRef} />; } }
然后使用current属性,即可获得当前元素
this.myRef.current
典型应用如下所示
constructor(props){ super(props) this.Mask = React.createRef() this.MenuList = React.createRef() } handleClick = () => { ReactDOM.findDOMNode(this.MenuList.current).classList.toggle('transform-zero') ReactDOM.findDOMNode(this.Mask.current).classList.toggle('mask-show') }
[注意]使用styledComponents样式化的元素暴露的接口是innerRef,而不是ref
<Wrap innerRef={this.itemRef}>
到此这篇关于react中的DOM操作实现的文章就介绍到这了,更多相关react DOM操作内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
- react组件封装成函数方法(React虚拟列表的实现)
- react初学难点(使用react的7个避坑案例小结)
- react和antd管理系统(手把手教你从零开始react+antd搭建项目)
- vue3 props用法(vue3组合API中setup、 ref、reactive的使用大全)
- react 的事件机制(React如何优雅的捕获异常)
- react基础知识详解(如何深入理解React的ref 属性)
- react 查看word文件(React实现导入导出Excel文件)
- react怎样实现响应式计算属性(深入浅析React中diff算法)
- linux虚拟内存实现需要哪六种机制(解析Linux高性能网络IO和Reactor模型)
- vue3.0 如何使用useroute(详解vue3中setUp和reactive函数的用法)
- react动态添加组件属性(react使用antd的上传组件实现文件表单一起提交功能完整代码)
- reactnative零基础入门到项目实战(用React Native制作一个简单的游戏引擎)
- reactnative动态设置值(react native实现监控手势上下拉动效果)
- react的动画实现(React实现动效弹窗组件)
- vue3中的setup的参数(Vue3中ref与reactive的详解与扩展)
- reacthooks用法(详解React Hooks是如何工作的)
- 蓝色代表什么(蓝色代表什么性格的人)
- 红色代表什么(红色代表什么情感和含义)
- 南宋志南和尚绝句 杨柳风似庙中来(南宋志南和尚绝句)
- 今天要穿什么颜色(今天要穿什么颜色的衣服最吉利)
- 一道高中题-求杯子的高度(一道高中题-求杯子的高度)
- 网坛停摆三巨头亏损惨重,费德勒跌幅88 纳达少赚2400万(网坛停摆三巨头亏损惨重)
热门推荐
- react路由原理解析(React配置子路由的实现)
- 视图平滑动画(菜单栏 “三” 变形为“X”css3过渡动画)
- 怎么写css效果最好(提高CSS代码效率的编写技巧)
- css如何让浮动元素水平居中
- html5 webrtc技术详解(Html5 webRTC简单实现视频调用的示例代码)
- dedecms系统更改(DEDECMS添加运行代码功能的FCKeditor编辑器修改方法)
- linux增加静态路由(Linux添加静态路由两种实现方法解析)
- pythonrequests框架实例(Python requests模块实例用法)
- php逻辑技巧图解(php版本CKEditor 4和CKFinder安装及配置方法图文教程)
- python爬虫request方法介绍(详解Python3网络爬虫二:利用urllib.urlopen向有道翻译发送数据获得翻译结果)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9