react--ref操作虚拟Dom
发布时间:2020-12-15 20:18:06 所属栏目:百科 来源:网络整理
导读:React的ref有3种用法: 1. 字符串(已废弃) 2. 回调函数 3. React.createRef() 老规矩先上代码 新增pages/Ref.js文件 import React from ‘react‘ ; export default class Ref extends React.Component{ constructor(props){ super(props); this .ref3 = Rea
React的ref有3种用法: 1. 字符串(已废弃) 老规矩先上代码 import React from ‘react‘; export default class Ref extends React.Component{ constructor(props){ super(props); this.ref3 = React.createRef(); } componentDidMount(){ console.log(this.refs.input); console.log(this.ref2); console.log(this.ref3); this.refs.input.value = ‘ref1‘; this.ref2.value = ‘ref2‘; this.ref3.current.value = ‘ref3‘; } render(){ return ( <div> {/*ref1*/} <input ref="input" />
{/*ref2*/} <input ref={(input) => {this.ref2 = input}} />
{/*ref3*/} <input ref={this.ref3} />
</div>
) } }
route/index.js修改如下 import React from ‘react‘; import {Switch,Route} from "react-router-dom"; import asyncComponent from ‘../lazy‘; import Home2 from ‘../pages/Home2‘; import OnePage from ‘../pages/OnePage‘; import TwoPage from ‘../pages/TwoPage‘; import This from ‘../pages/This‘; import Mount from ‘../pages/Mount‘; import HooksTest1 from ‘../hooks/test1‘; import AxiosTest from ‘../pages/AxiosTest‘; import Refs from ‘../pages/Ref‘; //import HooksUseState from ‘../hooks/useState‘;
const HooksUseState = asyncComponent(() => import (‘../hooks/useState‘)); const Routers = ( <Switch>
<Route path="/" exact component={Home2} />
<Route path="/onePage" component={OnePage} />
<Route path="/twoPage/:id" component={TwoPage} />
<Route path="/this" component={This} />
<Route path="/mount" component={Mount} />
<Route path="/hooksTest1" component={HooksTest1} />
<Route path="/axiosTest" component={AxiosTest} />
<Route path="/refs" component={Refs} />
<Route path="/hooksUseState" component={HooksUseState} />
</Switch>
); export default Routers
启动项目npm start,打开http://localhost:3000/#/refs 查看控制台打印的结果 我代码里有注释1、2、3,打印也有1、2、3应该很清楚吧 现在大部分都用第三种,因为你点开第三种的小箭头会显示很多属性,随便用 大部分都是你认识的Dom属性、事件和方法 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐
热点阅读