React + TypeScript:元素引用的传递
React 中需要操作元素时,可通过 React 中的元素引用正常的组件中,可通过创建对元素的引用来获取到某元素然后进行相应操作。比如元素加载后将焦点定位到输入框。 class App extends Component {constructor(props){super(props);this.inputRef = React.createRef();}componentDidMount(){this.inputRef.current.focus()}render() {return (<div className="App"><input type="text" ref={this.inputRef}/></div>);} } 创建对元素的引用是通过 React 内部对引用的 if(this.inputRef.current){this.inputRef.current.focus() } 在上面的示例中,之所以不用判空是因为我们在 组件中引用的传递对于原生 DOM 元素可以像上面那样创建引用,但对于自己写的组件,则需要使用 假如你写了个按钮组件,想要实现像上面那样,让使用者可通过传递一个 button.jsx const FancyInput = props => <input type="text" className="fancy-input" />; 添加 ref 支持后的按钮组件: button.jsx const FancyInput = React.forwardRef((props, ref) => {return <input type="text" ref={ref} className="fancy-input" />; });
使用上面创建的 class App extends Component {constructor(props) {super(props);this.inputRef = React.createRef();}componentDidMount() {if (this.inputRef.current) {this.inputRef.current.focus();}}render() {return (<div className="App"> - <input type="text" ref={this.inputRef}/> + <FancyInput ref={this.inputRef} /></div>);} } TypeScript 中传递引用先看正常情况下,对原生 DOM 元素的引用。还是上面的示例: class App extends Component<{}, {}> {private inputRef = React.createRef();componentDidMount() {/** ? Object is possibly 'null' */this.inputRef.current.focus();}render() {return (<div className="App">{/* ? Type '{}' is missing the following properties from type 'HTMLInputElement':... */}<input type="text" ref={this.inputRef} /></div>);} } 像上面那样创建并使用存在两个问题。 一个是提示我们的引用无法赋值到 function createRef<T>(): RefObject<T>; 所以上面创建引用时,显式指定它的类型。 - private inputRef = React.createRef(); + private inputRef = React.createRef<HTMLInputElement>(); 第二个问题是即使在 componentDidMount() { + if(this.inputRef.current){this.inputRef.current.focus(); + }} 还可通过变量后添加 componentDidMount() { - this.inputRef.current.focus(); + this.inputRef.current!.focus();} 修复后完整的代码如下: class App extends Component<{}, {}> {private inputRef = React.createRef<HTMLInputElement>();componentDidMount() {this.inputRef.current!.focus();}render() {return (<div className="App"><input type="text" ref={this.inputRef} /></div>);} } React + TypeScript 组件引用的传递继续到组件的情况,当需要引用的元素在另一个组件内部时,还是通过 这是该方法的签名: function forwardRef<T, P = {}>(Component: RefForwardingComponent<T, P>): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>; 可以看到,方法接收两个类型参数, 所以添加引用传递后, const FancyInput = React.forwardRef<HTMLInputElement, {}>((props, ref) => {return <input type="text" ref={ref} className="fancy-input" />; }); 使用组件: class App extends Component<{}, {}> {private inputRef = React.createRef<HTMLInputElement>();componentDidMount() {this.inputRef.current!.focus();}render() {return (<div className="App"><FancyInput ref={this.inputRef} /></div>);} } 相关资源
|
转载于:https://www.cnblogs.com/Wayou/p/react_typescript_forwardref.html
React + TypeScript:元素引用的传递相关推荐
- 子组件向父组件传递数据_如何将元素引用向下传递到角度的组件树中
子组件向父组件传递数据 I recently had a requirement to make sure a PrimeNG Dropdown panel inside a modal with s ...
- React + TypeScript实战(二)hooks用法
本文采用的react相关技术为: react@18.2.0 typescript@4.7.4 脚手架create-react-app 一.函数式组建的声明方式 import react, { FC } ...
- react组件之间传递信息/react组件之间值的传递
react组件之间传递信息/react组件之间值的传递 首先咱们先来了解一下,数据是怎么进行相互间传递的; api和组件的区别:一个是逻辑层的方法函数,一个是表现层的组件(方法函数). api是一组预 ...
- 【React+TS】从零开始搭建react+typescript+router+redux+less+px2rem自适应+sass+axios反向代理+别名@+Antd-mobile
一.通过create-react-app脚手架创建项目 npx create-react-app testproject --template typescript 在vscode中打开项目,可以看到 ...
- 【React+TS】从零开始搭建react+typescript+router+redux+less+pxToVw自适应+sass+axios反向代理+别名@+Antd-mobile
一.通过create-react-app脚手架创建项目 npx create-react-app testproject --template typescript 在vscode中打开项目,可以看 ...
- React + Typescript + Webpack 开发环境配置
对于复杂或多人开发的 React 项目来说,管理和使用每个组件的 props . state 或许会成为一件让人头痛的事情,而为每一个组件写文档,成本也会比较大,对项目的开发效率也不是最理想的. Ty ...
- React+TypeScript+webpack4多入口项目搭建
资源 React-16.8.* react-router-dom-4.3.* TypeScript-3.5.* webpack-4.* eslint-5.16.* 项目目录 ├── dist # 打包 ...
- web record 前端页面录屏 (react + typescript)
web record 前端页面录屏 (react + typescript + parcel) 项目地址: https://github.com/bgwd666/web-record 演示: 录屏页面 ...
- TypeScript项目引用(project references)
转发 TypeScript项目引用(project references) TypeScript新特性之项目引用(project references) 项目引用是TypeScript 3.0中的一项 ...
最新文章
- 【POJ】3617 Best Cow Line (字典序 字符串)
- eplan模板_EPLAN之3D箱柜清单自动生成
- 免费Java高级工程师学习资源,使用指南
- python是什么语言、即变量不需要显示声明数据类型-python中可以声明变量类型吗...
- proe4.0安装教程
- 四舍五入_从四舍五入谈起
- 第 6-7 课:Java 分布式框架面试题合集
- linuxShell之一 文件读取 循环与分支
- 比较器matlab,用于比较 MATLAB 对象的公共属性的比较器 - MATLAB
- MathWorks 中国
- ACM/ICPC 之 BFS+状态压缩(POJ1324(ZOJ1361))
- 如何下载使用期刊 LateX 模板
- kali免杀工具shellter
- 基于IM实现直播礼物效果
- 2015人生感悟哲理
- linux服务器告警信息:Free inodes is less than xx% on /volume 排查
- android ipad 播放器,[AS3]专业级跨平台网页播放器支持PC、iPad、iPhone、Android系统...
- Esp8266(WIFI模块)刷阿里云固件
- LWIP协议栈[I/drv.emac] RxCpltCallback err = -3错误解决办法
- ionic:引入图标
- 计算机启动后桌面上什么都没有,电脑开机后,桌面上什么都没有了?我怎么处理?好着急啊...