Understood **: ** javascript and HTML binding , met <HTML to follow to resolve, according to js {} met to resolve. May be understood to be written in js code HTML tags, each tag will eventually run into js code.
His grammar rules as follows:
1, must have a root element, i.e., the outermost one and only one tag;
2, all the labels must be closed;
3, case sensitive, or distinguish Html tag assembly;
4, must be quoted attribute values or add {} ;
5, the inner label release "<" will complain, because he will be resolved in accordance with the Html;
7, the cycle of the array (each element will react returns a component);
8, JSX allowed to let events directly binding on the label. For example: inline style must {} {}, that attribute value is not a string, the format must attribute hump four subjects try.
The corresponding explanation
. 1:
the render () {
return (
<div>
all page content to be written in this tag, if a tag appears similar stop, being given
</ div>
)
}
. 1
2
. 3
. 4
. 5
. 6
. 7
. 3:
<Tab> </ Tab> // will be identified as a component, need to reference from the position corresponding to the previous use, otherwise an error
<div> </ div> // Html is identified as a label
. 1
2
4:
<div className = {} className = "" style = {{}}> </ div> // all properties are the only two formats
. 1
6:
Data.Map ((Item, index) => {
return (
<li> </ li> tag corresponds to a component // li, where li tag can not put the same level label is to follow the other syntax JSX
)
})
. 1
2
3
. 4
. 5
7. With regard to binding events, there are three commonly used embodiment, 1, using the bind binding; 2, using the arrow function; 3, class attribute manner
. 1:
the handleClick () {the console.log (the this)} // print the this result here is an instance of the assembly, below
the render () {
return (
<div this.handleClick.bind the onClick = {(the this)}> < / div>
)
}
2:
the handleClick ((the this)} // print result here is an example of the this) {console.log the assembly, below
the render () {
return (
<= {div the onClick () => the this. the handleClick ()}> </ div>
)
}
. 3:
the handleClick = () => {the console.log (the this)} // print the this result here is an instance of the assembly, as shown by arrow function to use the job. otherwise not found the this
the render () {
return (
<div this.handleClick the onClick = {}> </ div>
)
}
. 1
2
. 3
. 4
. 5
. 6
. 7
. 8
. 9
10
. 11
12 is
13 is
14
15
16
17
18
19
20
21
The difference between: a first, second, render each will rebind time, and the second argument to pass twice;
third binding parameters not typically used in the transmission between the components, subassemblies receiving way: this.props.handleClick can get.
The third usage scenarios: For example: a pedometer is a separate component, the need to use a different parent component can be used
//父组件
export default class F_component extends Component{
state={
tepper:0,
}
changeStepper = (str)=>{
if(str==='red'){
this.setState({
stepper:this.state.stepper-1
})
}
if(str==='add'){
this.setState({
stepper:this.state.stepper+1
})
}
}
render(){
return(
<div>
<C_component stepper={this.state.stepper} changeStepper={this.changeStepper}/>
</div>
)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//子组件
export default class C_component extends Component{
transf=(str)=>{
this.props.changeStepper(str)
}
render(){
return(
<div>
<span onClick={this.transf.bind(this,"red")}>-</span>
<input value={this.props.stepper} onChange={()=>{}}/>
<span onClick={this.transf.bind(this,"add")}>+</span>
</div>
)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Here the style is ignored, so a pedometer, you can use at any page, while the parent may also get a pedometer current value
Note: If the sub-assembly components directly call the parent by this.props.changeStepper the method can also be, so would need to pass two methods come, but can not add (), otherwise they will be called directly, so an error. If the simple case of writing by the intermediate conversion function is a function can be ensured.