1, Components & props
1. Using props in function components
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Define character encoding -->
<meta charset="UTF-8">
<!-- introduce react Core library -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- introduce react-dome support react operation dom -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- introduce babel take jsx Convert to js -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<!-- Define page title -->
<title>React</title>
</head>
<body>
<div id="box"></div>
<script type="text/babel">
function Cpn(props) {
return (
<div>
<span>name: {props.name}</span>
</div>
)
}
ReactDOM.render(<Cpn name="Ralph" />, document.getElementById('box'))
</script>
</body>
</html>
Props attribute is passed by default. The default value is an empty object. It will automatically collect the attributes defined on the component and bind them to the props object.
-
When there are too many attributes, we can pass attr as an object
<script type="text/babel"> function Cpn(props) { return ( <div> <p>name: {props.name}</p> <p>age: {props.age}</p> <p>gender: {props.gender}</p> </div> ) } // Define the attributes that need to be passed const attr = { name: 'Ralph', age: 20, gender: 'man' } ReactDOM.render(<Cpn {...attr} />, document.getElementById('box')) </script>Note: the extension operator cannot directly extend an object because the object does not have an iterator interface, so we need to extend an object in the form of {... obj}. In React, {} does not represent an object, but indicates that javascript expressions can be used here, and React will automatically identify the current object and extend it.
-
Check the type of props attribute through the prop types dependency package
1. Introduce prop type dependency package
<script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>
2. Set the instance static property propTypes to define the receive type of the property
Cpn.propsType = { name: PropTypes.string.isRequired, age: PropTypes.number.isRequired, gender: PropTypes.string }In the above code, PropTypes is the keyword provided by the prop types dependency package, which provides a series of external keywords Validator , which can be used to ensure that the data type received by the component is valid. String means that the defined attribute must be of string type, and isRequired means that the defined attribute is required.
3. Define initial values (default values) for attributes in props
Cpn.defaultProps = { gender: 'man' }
2. Using props in class components
<script type="text/babel">
class Cpn extends React.Component {
render (){
return (
<div>
<p>name: {this.props.name}</p>
<p>age: {this.props.age}</p>
<p>gender: {this.props.gender}</p>
</div>
)
}
}
// Defines the type of the property
Cpn.propsType = {
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
gender: PropTypes.string
}
Cpn.defaultProps = {
gender: 'man'
}
// Define the attributes that need to be passed
const attr = {
name: 'Ralph',
age: 20
}
ReactDOM.render(<Cpn { ...attr } />, document.getElementById('box'))
</script>
After careful observation, we can find that in the render function of class components, we can use this.props to get the props passed by the parent component. We might as well boldly guess whether we can also get the desired results through this.props when we customize a function.
<script type="text/babel">
class Cpn extends React.Component {
constructor() {
this.getProps()
}
render (){
return (
<div>
<p>name: {this.props.name}</p>
<p>age: {this.props.age}</p>
<p>gender: {this.props.gender}</p>
</div>
)
}
// Custom method
getProps (){
console.log(this.props)
}
}
// Defines the type of the property
Cpn.propsType = {
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
gender: PropTypes.string
}
Cpn.defaultProps = {
gender: 'man'
}
// Define the attributes that need to be passed
const attr = {
name: 'Ralph',
age: 20
}
ReactDOM.render(<Cpn { ...attr } />, document.getElementById('box'))
</script>
The operation effect is as follows:
We carefully observe the error message. It is not difficult to find that it is to prompt us to call super before this. OK, we add this keyword according to the prompt
<script type="text/babel">
class Cpn extends React.Component {
constructor() {
super()
this.getProps()
}
render (){
return (
<div>
<p>name: {this.props.name}</p>
<p>age: {this.props.age}</p>
<p>gender: {this.props.gender}</p>
</div>
)
}
// Custom method
getProps (){
console.log(this.props)
}
}
// Defines the type of the property
Cpn.propsType = {
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
gender: PropTypes.string
}
Cpn.defaultProps = {
gender: 'man'
}
// Define the attributes that need to be passed
const attr = {
name: 'Ralph',
age: 20
}
ReactDOM.render(<Cpn { ...attr } />, document.getElementById('box'))
</script>
The operation effect is as follows:
Let's read the official website carefully. There is a sentence on the official website: Class components should always use props parameters to call the constructor of the parent Class. OK, I change!!!
<script type="text/babel">
class Cpn extends React.Component {
constructor(props) {
super(props)
this.getProps()
}
render (){
return (
<div>
<p>name: {this.props.name}</p>
<p>age: {this.props.age}</p>
<p>gender: {this.props.gender}</p>
</div>
)
}
// Custom method
getProps (){
console.log(this.props)
}
}
// Defines the type of the property
Cpn.propsType = {
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
gender: PropTypes.string
}
Cpn.defaultProps = {
gender: 'man'
}
// Define the attributes that need to be passed
const attr = {
name: 'Ralph',
age: 20
}
ReactDOM.render(<Cpn { ...attr } />, document.getElementById('box'))
</script>
The effects are as follows:
At this point, the effect is exactly what we want, and we get a conclusion: when we rewrite the constructor, we should call the parent constructor through the super keyword and pass in props as a parameter