1. Introduction to Props
1. Each component object has a props attribute
2. All attributes of component tags are stored in props
3. Pass the changed data from the outside of the component to the inside of the component through the label attribute
2. Basic use of props
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1_props</title>
</head>
<body>
<!-- Prepare a container -->
<div id="test"></div>
<div id="test1"></div>
<!-- Import react core library -->
<script src="../../js/react.development.js"></script>
<!-- Introduce react-dom for manipulating dom -->
<script src="../../js/react-dom.development.js"></script>
<!-- Introduce babel to convert jsx to js -->
<script src="../../js/babel.min.js"></script>
<script type="text/babel">
//Create component
class Person extends React. Component{<!-- -->
render(){<!-- -->
const {<!-- -->name,age,sex}=this.props
return (
<ul>
<li>{<!-- -->name}</li>
<li>{<!-- -->sex}</li>
<li>{<!-- -->age}</li>
</ul>
)
}
}
// render the component to the page
ReactDOM.render(<Person name="tom" age={<!-- -->18} sex="male"/>,document.getElementById('test'))
// mock data
const p={<!-- -->name:'bobo',age:18,sex:'male'}
ReactDOM.render(<Person {<!-- -->...p}/>,document.getElementById('test1'))
</script>
</body>
</html>
1. {…p} can be used when the number and content of attributes are dynamic
//simulation data
const p={<!-- -->name:'bobo',age:18,sex:'male'}
ReactDOM.render(<Person {<!-- -->...p}/>,document.getElementById('test1'))
3. Restrictions on attribute values
1. Since the value of some attributes must be specific content, all outside need to limit the value of the attribute
For example: age is number and name is string
class Person extends React. Component{<!-- -->
render(){<!-- -->
const {<!-- -->name,age,sex}=this.props
//props are read-only
return (
<ul>
<li>{<!-- -->name}</li>
<li>{<!-- -->sex}</li>
<li>{<!-- -->age + 1}</li>
</ul>
)
}
}
//Restrict label attributes
Person.propTypes={<!-- -->
name:PropTypes.string.isRequired, //Restrict name must pass (isRequirePd) and be String
sex:PropTypes.string, //limit sex to String
age:PropTypes.number, //limit age to number
speak:PropTypes.func //limit speak to function (func)
}
//set default value
Person.defaultProps={<!-- -->
sex:'Wal-Mart shopping bag',
age: 18
}
// render the component to the page
ReactDOM.render(<Person name="tom" speak={<!-- -->speak} />,document.getElementById('test'))
ReactDOM.render(<Person name="peter" age={<!-- -->18} sex="female"/>,document.getElementById('test1'))
// mock data
const p={<!-- -->name:"bobo",age:18,sex:'male'}
ReactDOM.render(<Person {<!-- -->...p}/>,document.getElementById('test2'))
function speak(){<!-- -->
console.log("I can talk");
}
4. Shorthand for props
//Create component
class Person extends React. Component{<!-- -->
constructor(props){<!-- -->
//If you want to access props through this in the constructor, you must receive props and pass them to super
console. log(props);
super(props)
}
render(){<!-- -->
const {<!-- -->name,age,sex}=this.props
//props are read-only
return (
<ul>
<li>{<!-- -->name}</li>
<li>{<!-- -->sex}</li>
<li>{<!-- -->age + 1}</li>
</ul>
)
}
//Restrict label attributes
static propTypes={<!-- -->
name:PropTypes.string.isRequired, //Restrict name must pass (isRequirePd) and be String
sex:PropTypes.string, //limit sex to String
age:PropTypes.number, //limit age to number
}
//set default value
static defaultProps={<!-- -->
sex:'Wal-Mart shopping bag',
age: 18
}
}
1. Through static modification, attribute restrictions can be directly written into the class
5. Functional components use props
1. Since the function component can receive parameters, it can also use props
<script type="text/babel">
//Create component
// class Person extends React. Component{<!-- -->
// constructor(props){<!-- -->
// //If you want to access props through this in the constructor, you must receive props and pass them to super
// console. log(props);
// super(props)
// }
// render(){<!-- -->
// const {name,age,sex}=this.props
// //props are read-only
// return (
// <ul>
// <li>{name}</li>
// <li>{sex}</li>
// <li>{age + 1}</li>
//</ul>
// )
// }
// //Restrictions on label attributes
// static propTypes={<!-- -->
// name:PropTypes.string.isRequired, //Restrict name must pass (isRequirePd) and be String
// sex:PropTypes.string, //limit sex to String
// age:PropTypes.number, //limit age to number
// }
// //Set the default value
// static defaultProps={<!-- -->
// sex:'Wal-Mart shopping bag',
//age:18
// }
// }
// functional component
//pass in props and use
function Person(props){<!-- -->
const {<!-- -->name,sex,age}=props
return (
<ul>
<li>{<!-- -->name}</li>
<li>{<!-- -->sex}</li>
<li>{<!-- -->age + 1}</li>
</ul>
)
}
// render the component to the page
ReactDOM.render(<Person name="tom" age={<!-- -->18} sex="male" />,document.getElementById('test'))
2. However, if functional components need to write attribute restrictions, they need to use the complex writing method of class components
//Restrictions on tag attributes
Person.propTypes={<!-- -->
name:PropTypes.string.isRequired, //Restrict name must pass (isRequirePd) and be String
sex:PropTypes.string, //limit sex to String
age:PropTypes.number, //limit age to number
speak:PropTypes.func //limit speak to function (func)
}
//set default value
Person.defaultProps={<!-- -->
sex:'Wal-Mart shopping bag',
age: 18
}
Personal Blog Yusheng’s study notes