definition
An upper layer for receiving a component object parameters passed!
DEMO
Here is a simple pass values to the interior of the demo components:
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title>
</head>
<body>
<!--react基础库-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
<!--bable转换库，ES语法以及Jax语法的转换-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<div id="content"></div>
<script type="text/babel">
constructor (props) {
// constructor in the initialization module performs
class ComponentA the extends React.Component {
// definition component
super (props);
value // state is obtained from the top of an object props parameters passed
this.state = {
name: this.props.name,
Age: this.props.age
}
}
// will carry on the render page rendering, when data is updated or the transmission state is monitored ajax other events triggers a flush render the
render () {
// values from the state
const name = this.state.name;
const = this.state.age Age;
return (
<div>
<P> name: {name} </ P>
<P> Age: Age {} </ P>
</ div>
);
}
}
// parameter name and pass Age
ReactDOM.render (<ComponentA {name = 'AAA'} = Age 20 is} {/>, document.getElementById ( "Content"));
</ Script>
</ body >
</ HTML>
Page to show the effect
When an incoming call to the component parameter name and age were obtained when the value of the components inside the initialization, and is rendered in the render state to the page:
Spread
1. Default:
props attributes can set the default values:
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title>
</head>
<body>
<!--react基础库-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
<!--bable转换库，ES语法以及Jax语法的转换-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<div id="content"></div>
<script type="text/babel">
constructor (props) {
// constructor in the initialization module performs
class ComponentA the extends React.Component {
// definition component
super (props);
value // state is obtained from the top of an object props parameters passed
this.state = {
name: this.props.name,
Age: this.props.age
}
}
// will carry on the render page rendering, when data is updated or the transmission state is monitored ajax other events triggers a flush render the
render () {
// values from the state
const name = this.state.name;
const = this.state.age Age;
return (
<div>
<P> name: {name} </ P>
<P> Age: Age {} </ P>
</ div>
);
}
}
// default value is specified
ComponentA.defaultProps = {
name: 'Jerry',
Age: 30
}
// I do not pass any parameters herein
ReactDOM.render (<ComponentA />,document.getElementById("content ")) ;
</ Script>
</ body>
</ HTML>
Page display:
Name: Jerry Age: 30
2, constraint:
Incoming props to add a constraint, data types and specifications add a constraint:
Instance Officer: https://react.docschina.org/docs/typechecking-with-proptypes.html
Because bloggers the wrong version, so the test compilation error, so good, scaffolding built React environment will not exist next version of the problem to understand.
3, extended operator [...]
render(){
//从state中取值
const Student = { name : 'Rose' , level: 100};
const Student2= {...Student};
const array = [1,2,3,4,5];
const array2 = [0, ...array,6]
return(
<div>
<p>名字:{Student2.name}</p>
<p>array2:{array2}</p>
</div>
);
}
Rendering results:
Name: Rose array2: 0123456