创建好了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>
)
}
}