created react After the project structure , We need to write a bunch of components , at present react There are two common ways to write components :
1, Function component :
import React from 'react';
function LogIn(props){
return(
<button> Sign in </button>
)
}
export default LogIn;
2,class Components :
import React from 'react';
class LoginControl from React.Component{
constructor(props){
// Data initialization
super(props);
}
componentWillMount(){
// The data has been initialized , But it hasn't been rendered yet dom, Rarely used
}
componentDidMount(){
// First render dom, Here you can ask for ajax, and setDate Re render the data
}
componentWillReceiveProps(){
// After accepting the change of the parent component props When you need to re render components, you use more
}
componentWillUnmount(){
// Unloading and data destruction
}
render() {
/*js Handle */
return (
<div>
</div>
)
}
}
export default HomePage1;
Believe in JSX Rendering will not be strange , Not much here , Direct use {} Curly bracket rendering is OK , Note that it has to be effective JavaScript expression .
I'm going to highlight a point , stay react Event handling in , as well as props This important attribute , What's more, how to use and transfer parameters between child and parent components . The following is based on class Components :
Log in with the official website , Back out, for example :
First write a login and logout widget :
Sign in :
import React from 'react';
function LogIn(props){
console.log(props)
return(
<button onClick={props.onClick}> Sign in </button>
)
}
export default LogIn;
sign out :
import React from 'react';
function LogOut(props){
console.log(props)
return(
<button onClick={props.onClick}> sign out </button>
)
}
export default LogOut;
Next I'm going to write a login controller to render the components above :
import React from 'react';
import LogOut from "./LogOut";
import LogIn from "./LogIn";
class HomePage1 extends React.Component {
constructor(props){
// Data initialization
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(){
// The data has been initialized , But it hasn't been rendered yet dom, Rarely used
}
componentDidMount(){
// First render dom, Here you can ask for ajax, and setDate Re render the data
}
componentWillReceiveProps(){
// After accepting the change of the parent component props When you need to re render components, you use more
}
componentWillUnmount(){
// Unloading and data destruction
}
// Write any way you want to write ******************
logIn(e){
alert(" Log on to the ")
this.setState({
isLogin:true,
user:e
})
}
logOut(){
alert(" Log out ")
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;
among , I'll briefly talk about the problems in my study :
1. Just beginning to learn react, I don't know where to write my own way , After searching the documents and Du Niang , not have understood until then , Directly in class Just write in the component , Of course, the method is finished , To trigger him , How to trigger it next , Another problem ,react Two kinds of :
1.1 stay constructor Write in the build this.LogIn=this.LogIn.bind(this); Why do you write this way , The document is very clear , And then in return Start triggering in the element of onClick="{this.Login}" That's all right. ,,,
1.2 When writing methods , Use the arrow function ,Login = () =>{}, And then in return Start triggering in the element of onClick="{this.Login}" That's all right. ,,,
etc. ,,,,, What if I want to wear parameters ?? The official website also gives two ways :
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
In both cases ,React The object of the event e
Will be passed as a second parameter . If you use the arrow function , The event object must be passed explicitly , And by bind
The way , Event objects and more parameters will be passed implicitly . ( I used to use the first method )
2. about props This attribute , The official website also put forward , Very important attributes , When I was a child, I wrote about this case ....props It is mainly used for parameter transfer between components .
2.1 Father and son pass on value .
. Down the value -- The parent component passes values to the child component
Parent component passed props Passing data that is not a method , Feed component ;
// Parent component
<Child data={[1,2,3]} />
// Sub components
console.log(this.props.data);
2. Up by value -- Child components pass values to parent components
Parent component passed props Pass a method to the subcomponent , The subcomponents call the method , And pass the data to the parent component in the form of parameters , The parent component can process the incoming data in this method ;
// Parent component
import Child from './Child.js';
export default class Parent extend compenent{
getData=(data)=>{
console.log(data);
}
render(){
return (
<div>
Parent component
<Child getData={this.getData}/>
</div>
)
}
}
// Child components
export default class Child extend compenent{
state={
data:[1,2,3]
}
render(){
const {data}=this.state;
return (
<div>
Child components
<button onClick={()=>{this.props.getData(data)}}><button>
</div>
)
}
}