<h2 id="title2">二、 函数式声明

  其实之前一直都是使用的变量去指代html元素,没有使用过 class 那种,现在先使用ES5的写法去写一写什么是函数式声明。

  先看一下之前的写法吧

<div class="cnblogs_code">

 const Head =   

Head头部

const Foot =

底部

const element =

Element内容

document.getElementById('app' )

函数式声明是什么样子的呢

<div class="cnblogs_code">

 const Head =         

Head头部

const Foot =

底部

const Element =

Element内容

, document.getElementById('app' )

可以很清晰的看到他们两个的区别,一个是使用变量来代表的,另外的一个是使用的组件形式代表的,开发中的写法都是使用ES6的class继承声明来写组件的

看一下函数声明的传值

<div class="cnblogs_code">

 const Head =         

{props.title}

const Foot =

{props.con}

const Element =
< title={'头部信息啊' />

Element内容

< con={'底部的内容啊' />
, document.getElementById('app' )

这个样子和vue其实是挺像的,在标签上面写自定义的属性,子组件就可以接收到,等先这样看看,后面会使用class写的,class写起来感觉还容易理解一些。

注意: 函数式声明组件

  1. 组件的首字母必须是大写

  2. 不要使用H5新标签

下面看一个状态改变驱动视图的例子

<div class="cnblogs_code">

 const Head =         

{props.title}

const Foot =

{props.con}

.state = title: '头部信息' con: '底部信息' setTimeout(() => title: '头部信息改变' },2000
< title={ />

Element内容

< con={ />
, document.getElementById('app' )

这样就可以和上面那种结合起来了,以后所有的组件都用class来写了,就不用function那种形式了。

 

<h2 id="title3">三、 this以及事件对象

  react组件中的this和事件对象的不同写法有的写法是需要绑定this的

<div class="cnblogs_code">

     
      console.log(  
             

title

, document.getElementById('app' )

看到上面打印的this是undefined,下面有几种写法可以更正this指向实例化对象的

第一种 更正this和事件对象

<div class="cnblogs_code">

        .btn = .btn.bind();  
  
      console.log(   
             

title

, document.getElementById('app' )

需要注意的是上面的那种写法如果传递参数的话,那么事件对象就是最后一个没有对象参数的和js中的bind一样

<div class="cnblogs_code">

        .btn = .btn.bind();  
  
      console.log(   
             

title

, document.getElementById('app' )

第二种 在行内bind

<div class="cnblogs_code">

     
      console.log(   
             

title

// 直接写到行内,在这里改变this的指向,同样的问题,那个参数的事件对象是最后一个
, document.getElementById('app' )

第三种 在一个函数里面执行它

<div class="cnblogs_code">

     
      console.log(   
             

title

, document.getElementById('app' )

第四种 改变函数的写法

<div class="cnblogs_code">

     
   btn = (e) =>     console.log(   
             

title

, document.getElementById('app' )

当然了这种方式如果要传递参数的话还是需要bind的。

 

<h2 id="title4">四、 操作dom元素

  如果想要在react中操作dom元素的话,有几种方法

第一种 直接使用js的方法

<div class="cnblogs_code">

    
  
   btn = () =>     const ele = document.querySelector('.h1'  
  
             

title

, document.getElementById('app' )

第二种 通过事件对象

<div class="cnblogs_code">

    
  
   btn = (e) =>   
             

title

, document.getElementById('app' )

第三种 ref

  和vue一样

<div class="cnblogs_code">

    
  
   btn = (e) =>     console.log(  
             

// 这里定义一个字符串的名字

, document.getElementById('app' )

不过最新版本的不建议上面的那种写法了,也是ref建议下面的写法

以后我们就可以用下面这种最常用的方式

<div class="cnblogs_code">

    
  
   btn = (e) =>     console.log(  
             

{.abc = abc}}>title

, document.getElementById('app' )

第四种 ReactDOM.findDOMNode

<div class="cnblogs_code">

    
  
   btn = (e) =>     console.log( 
     console.log(ReactDOM.findDOMNode(  
             

{.abc = abc}}>title

, document.getElementById('app' )

ref如果标记的是组件,那么ref他就是组件,但是findDOMNode这种方式是获取DOM元素的,就算里面的参数是组件,也是获得DOM元素

 

<h2 id="title5">五、 父子组件传值

  核心思想 

  父组件给子组件传值 直接在组件上面添加属性就可以了 子组件通过props访问,得到 其实是构造函数实例化的时候传过去了

  子组件给父组件传值 其实是父组件给子组件传一个函数,子组件调用的时候把 要传递的数据 放到 父组件传递过来的函数 的参数里面,然后父组件再去做他自己的操作

Item子组件

<div class="cnblogs_code">

1        .state =       sub:        
      console.log('执行了吗'       
      console.log('子组件打印this'     console.log(     console.log( 
            

Item组件

{.state.sub.res}

.props.supFn.bind(,'子组件参数')} /> defaultValue="22" onClick={() => .props.supFn('参数2' />
}

父组件

<div class="cnblogs_code">

        .superFn = .superFn.bind( 
    state =        res: '里面的数据'
   
      console.log('父组件的函数'      let data =         res: '修改过后'
   
                     

主页面

{.state.data.res}

.superFn} data={.state.data} aaa="传值啊">
, document.getElementById('app' )


<h2 id="title6">六、在浏览器中支持import export

  要在服务器环境下打开文件

  在谷歌浏览器输入框中输入

然后就可以使用模块导出导出功能了

<div class="cnblogs_code">

 
 const a = 1 const b = 2 
 export  {a,b};

 

<div class="cnblogs_code">

 

如果你看了我的文章有了一些收获我会非常高兴的,由于能力有限,文章有的部分解释的不到位,希望在以后的日子里能慢慢提高自己能力,如果不足之处,还望指正。

 

总结

以上是脚本之家为你收集整理的react基础语法二全部内容,希望文章能够帮你解决react基础语法二所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。
标签:
猜你在找的React相关文章
其他相关热搜词更多
CSSHTMLNode.jscocosvue.jsrailsangularJSJsHTML5bashreactangularCSS3实现脚本依赖Luabootstrapspring问题
全站导航更多
最新React教程
热门React教程