目录
一、Props属性
1、props的用处
既然React组件可以通过JavaScript函数方式实现， 那么React组件就可以接受参数的传入。React框架定义了一个Props的概念， 专门用来实现React函数组件接受参数的输入。
<!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>Props属性</title>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById('root');
//1.定义函数组件
function PropsComponent(props){
if(props){
return (
<div>
<p>Props数据是：</p>
<p>姓名：{ props.name }</p>
<p>年龄：{ props.age }</p>
</div>
)
}else{
return <p>Props数据为空!</p>
}
}
const span = (
<span>
<PropsComponent name='小森' age='23'/>
<hr />
<PropsComponent />
</span>
)
//2.渲染
ReactDOM.render(span,root)
</script>
</body>
</html>
2、通过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>Props属性设置表单的默认值</title>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById('root')
//1.定义函数组件
function UserName(){
const userName = (
<p>用户名：<input type="text"/></p>
)
return userName;
}
// UserName.defaultProps = {
// default: '默认值'
// }
function UserPwd(props){
const userPwd = (
<p>密 码：<input type="password" value={ props.pwd }/></p>
)
return userPwd;
}
function FormLogin(){
return (
<div>
<h3>用户登录</h3>
<UserName />
<UserPwd pwd="123456"/>
</div>
)
}
//2.渲染
ReactDOM.render(<FormLogin/>,root)
</script>
</body>
</html>
（1）在使用函数组件时无论是否传递参数,props属性都是默认存在的
（2）props的参数值是只读的，不能修改
（3）在类组件中可以使用props属性的defaultProps来设置组件的默认值
注意：标签可以设置defaultValue属性，该属性的值可以是Props属性的值
①表达方式：
类名.defaultProps = {
属性名: 默认值
}<!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>类组件中的Props</title>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/prop-types.js"></script>
<script src="../js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById('root');
//1.定义类组件
class PropsTest extends React.Component{
render(){
return (
<div>
<label>用户名：
<input type="text" defauValue={this.props.default}/>
</label>
</div>
)
}
}
//2.定义类组件的默认值
PropsTest.defaultProps = {
default : '小森',
}
//3.渲染
ReactDOM.render(<PropsTest />,root)
</script>
</body>
</html>
注意：这个方法可以更改里面的值
②表达方式：使用static来定义默认值
使用static来定义默认值
static.defaultProps = {
属性名: 默认值
}（3）在函数组件中使用props属性的defaultProps来设置组件的默认值
函数名. defaultProps = {
属性名: 默认值
}<body>
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById('root');
//1.定义函数组件
function Person(props){
const { name,age,sex } = props;//函数组件里不存在this
return (
<ul>
<li>姓名：{ name }</li>
<li>年龄：{ age }</li>
<li>性别：{ sex }</li>
</ul>
)
}
//2.定义函数组件的默认值
Person.defaultProps = {
name: '小森',
age: '22',
sex: '女'
}
//3.渲染
ReactDOM.render(<Person name="AAAAA"/>,root)
</script>
</body>（5）可以通过Props对虚拟DOM中的标签属性进行类型、必要性的制
①、 导入prop-types.js库文件：对props属性进行类型、必要性的检查
②、 通过PropTypes对标签属性进行限制
<body>
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById('root');
//1.定义类组件
class PropsTest extends React.Component{
//定义默认值
static defaultProps = {
name : '小刘',
age: 22,
address: '浙江'
}
//对标签属性值进行限制
static propTypes = {
name:PropTypes.string.isRequired, //表示name属性值必须是string类型,并且不能缺少
age:PropTypes.number,
address:PropTypes.string //进行类型限制
}
render(){
const { name,age,address } = this.props //解构赋值
return (
<div>
<label>用户名：
<input type="text" defaultValue={ name }/>
</label>
<br />
<label>年龄：
<input type="text" defaultValue={ age }/>
</label>
<br />
<label>地址：
<input type="text" defaultValue={ address }/>
</label>
</div>
)
}
}
//3.渲染
ReactDOM.render(<PropsTest />,root)
</script>
</body>③ 、在函数组件中进行类型检查
函数名.propTypes = {
属性名:PropTypes.类型名.必要性限制
}④、 在类中进行类型检查
Ⅰ、在类的内部使用static进行定义
static propTypes = {
属性名:PropTypes.类型名.必要性限制
}Ⅱ、在类的外部进行定义
类名.propTypes = {
属性名:PropTypes.类型名.必要性限制
}3、案例（明信片）
<!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>组件的切分和提取</title>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/prop-types.js"></script>
<script src="../js/babel.min.js"></script>
</head>
<style>
body{
text-align: center;
}
div#root{
position: relative;
width: 500px;
height: auto;
border: 1px solid gray;
margin: 8px auto;
padding: 8px;
text-align: center;
}
div.cssUserDetail{
width: 480px;
height: 320px;
padding: 4px;
border: 1px solid gray;
}
span.cssAvator{
float: left;
width: 32%;
height: auto;
}
span.cssUserInfo{
float: right;
width: 50%;
height: auto;
}
span.cssDate{
float: right;
width: 80%;
height: auto;
}
p.p-center{
text-align: center;
}
p.p-left{
text-align: left;
}
p.p-right{
text-align: right;
}
</style>
<body>
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById('root');
//1.定义日期格式化函数
function formatDate(date){
return date.toLocaleDateString();
}
//2.定义常量为组件提供数据
const avator = { //显示图片
url: '../images/me.png',
alt: 'load...',
nikeName:'缺了林的森'
}
const userInfo = { //显示用户信息
id: '007',
name: '小森',
gender: '女',
age: 23,
email: '778899@qq.com'
}
const nowDate = { //格式化日期
date : formatDate(new Date())
}
//3、定义组件
function Avator(props){ //组件一、显示图片和绰号
return (
<span className='cssAvator'>
<img className = 'cssAvatorImg'
src={ props.aiator.url }
alt={ props.aiator.alt }
/>
<p className='p-center'>绰号：{ props.aiator.nikeName }</p>
</span>
)
}
function UserInfo(props){ //显示用户信息的组件
return (
<span className='cssUserInfo'>
<p className='p-left'>Id: { props.userInfo.id }</p>
<p className='p-left'>Name: { props.userInfo.name }</p>
<p className='p-left'>Gender: { props.userInfo.gender }</p>
<p className='p-left'>Age: { props.userInfo.age }</p>
<p className='p-left'>Email: { props.userInfo.email }</p>
</span>
)
}
function UserDetail(props){ //将Avator、UserInfo组件组合到一起
return (
<div className='cssUserDetail'>
<Avator aiator = { props.aoator }/>
<UserInfo userInfo= { props.userInfo}/>
<span className = 'cssDate'>
<p className='p-right'>Date：{ props.currDate.date }</p>
</span>
</div>
)
}
//4.渲染
const ComDemo = <UserDetail
aoator = { avator }
userInfo = { userInfo }
currDate = { nowDate }
/>
ReactDOM.render(ComDemo,root)
// 111行userInfo对应的是98行的userInfo
</script>
</body>
</html>
注意：avator、aoator、aiator，用不同的名称来表示它们之间的传递关系，易于区分
288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
