react 语法小知识

创建好了react项目结构之后,就需要我们写一堆的组件了,目前react组件有两种常用的写法:

1,函数组件:

import React from 'react';
function LogIn(props){
    return(
        <button>登录</button>
    )
}
export default LogIn;

2,class组件:

import React from 'react';
class LoginControl from React.Component{
   constructor(props){
        //数据初始化
        super(props);
        
    }
    componentWillMount(){
        //数据已经初始化,但是还没有渲染dom,一般很少用
    }

    componentDidMount(){
        //第一次渲染dom,在这里可以请求ajax,并setDate重新渲染数据


    }
    componentWillReceiveProps(){
        //在接受父组件改变后的props需要重新渲染组件时用的比较多

    }
    componentWillUnmount(){
        //卸载和数据销毁
    }
    render() {
        /*js处理*/
        return (
            <div>
               
            </div>
        )
    }
}
export default HomePage1;

相信JSX渲染都不会陌生了,这里就不多说了,直接用{}大花括号渲染就行了, 注意必须是有效的 JavaScript 表达式

接下来我重点说明一点,在react中的事件处理,以及props这个重要的属性,还有就是子父组件之间的如何使用以及如何传递参数等。以下基于class组件:

拿官网给的登录,退出来为例:

首先写个登录和退出的小组件:

登录:
import React from 'react';
function LogIn(props){
    console.log(props)
    return(
        <button onClick={props.onClick}>登录</button>
    )
}
export default LogIn;
退出:
import React from 'react';
function LogOut(props){
    console.log(props)
    return(
        <button onClick={props.onClick}>退出</button>
    )
}
export default LogOut;

接下来我要写个登录控制器来渲染上面的组件:

import React from 'react';
import LogOut from "./LogOut";
import LogIn from "./LogIn";
class HomePage1 extends React.Component {
    constructor(props){
        //数据初始化
        super(props);
        this.logIn = this.logIn.bind(this);
        this.logOut = this.logOut.bind(this);
        this.state = {
            a:1,
            b:2,
            c:3,
            isLogin:false,
            user:null
        }
    }
    componentWillMount(){
        //数据已经初始化,但是还没有渲染dom,一般很少用
    }

    componentDidMount(){
        //第一次渲染dom,在这里可以请求ajax,并setDate重新渲染数据


    }
    componentWillReceiveProps(){
        //在接受父组件改变后的props需要重新渲染组件时用的比较多

    }
    componentWillUnmount(){
        //卸载和数据销毁
    }

    //写任何想写的方法******************

    logIn(e){
        alert("登录了")
        this.setState({
            isLogin:true,
            user:e
        })
    }
    
    logOut(){
        alert("退出登录了")
        this.setState({
            isLogin:false,
            user:null
        })
    }

    render() {

        let button;
        if(this.state.isLogin){
            button = <LogOut onClick={this.logOut}/>
        }else{
            button = <LogIn onClick={(e)=>this.logIn('admin',e)}/>
        }



        return (
            <div>
                <h1>Hello,{this.state.a+this.state.b}</h1>
                {button}
                <p>{this.state.user}</p>
            </div>
        )
    }
}

export default HomePage1;

其中,我对我学习中碰到的问题简略的说一下:

1.刚开始学习react,竟然不知道在哪里写个自己的方法,经过翻查文档以及度娘,才知道,直接在class组件中写就行了,当然方法写完了,要去触发他,接下来怎么触发呢,又是个问题,react给提供了两种:

1.1 在constructor构建中写入this.LogIn=this.LogIn.bind(this); 具体为什么这样写,文档给的已经很清楚了,然后在return的元素中开始触发onClick="{this.Login}"就可以了,,,

1.2在写方法的时候,使用箭头函数,Login = () =>{},然后在return的元素中开始触发onClick="{this.Login}"就可以了,,,

等,,,,,我如果想穿参数怎么办呢??官网也给了两种方法:

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

在这两种情况下,React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式,事件对象必须显式的进行传递,而通过 bind 的方式,事件对象以及更多的参数将会被隐式的进行传递。 (我习惯性的用第一种方法了)

2.对于props这个属性,官网也给提出了,非常重要的属性,写这个小案例的时候我就采坑了。。。。props主要用于组件之间的参数传递。

2.1父子传值。

.向下传值--父组件向子组件传值
父组件通过props传递一个不是方法的数据,给子组件;

//父组件中
<Child data={[1,2,3]} />
//子组件中
console.log(this.props.data);

2.向上传值--子组件向父组件传值
父组件通过props向子组件传入一个方法,子组件在通过调用该方法,并将数据以参数的形式传给父组件,父组件可以在该方法中对传入的数据进行处理;

//父组件
import Child from './Child.js';
export default class Parent extend compenent{
  getData=(data)=>{
    console.log(data);
  }
  render(){
    return (
      <div>
        父组件
        <Child getData={this.getData}/>
      </div>
    )
  }
}

//子组件
export default class Child extend compenent{
  state={
    data:[1,2,3]
  }
  render(){
    const {data}=this.state;
    return (
      <div>
        子组件
        <button onClick={()=>{this.props.getData(data)}}><button>
      </div>
    )
  }
}

 

 


 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章