React04——组件实例三大属性之props属性

最新推荐文章于 2022-02-17 15:13:45 发布

I have a lemon

最新推荐文章于 2022-02-17 15:13:45 发布

阅读量148

点赞数

分类专栏：前端文章标签： react

本文链接：https://blog.csdn.net/m0_37483148/article/details/114730557

版权

前端专栏收录该内容

86 篇文章 1 订阅

订阅专栏

理解

每个组件对象都会有props(properties的简写)属性
组件标签的所有属性都保存在props中

作用

通过标签属性从组件外向组件内传递变化的数据
注意: 组件内部不要修改props数据

编码操作

内部读取某个属性值

this.props.name

对props中的属性值进行类型限制和必要性限制

第一种方式（React v15.5 开始已弃用）：

Person.propTypes = {
name: React.PropTypes.string.isRequired,
age: React.PropTypes.number
}

第二种方式（新）：使用prop-types库进限制（需要引入prop-types库）

Person.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number.
}

扩展属性: 将对象的所有属性通过props传递

<Person {...person}/>

默认属性值：

Person.defaultProps = {
age: 18,
sex:'男'
}

组件类的构造函数

constructor(props){
super(props)
console.log(props)//打印所有属性
}

props的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
         	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	<div id="test2"></div>
	<div id="test3"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="js/babel.min.js"></script>
    <script type="text/babel">
    
      class Person extends React.Component{
          render(){
              const {name,age,sex}=this.props
              return(
                  <ul>
                    <li>姓名：{name}</li>
                    <li>性别：{sex}</li>
                    <li>年龄：{age}</li>
                </ul>
              )
          }
      }

        ReactDOM.render(<Person name="tom" age={18} sex="man"/>,document.getElementById('test'))
        ReactDOM.render(<Person name="jerry" age={28} sex="woman"/>,document.getElementById('test2'))

        const p={name:'andy',sex:"woman",age:19}
        console.log('@',...p);

        	console.log('@',{...p});
		// ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex}/>,document.getElementById('test3'))
        ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))
        
    </script>
</body>
</html>

props进行限制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
         	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	<div id="test2"></div>
	<div id="test3"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="js/babel.min.js"></script>
    <script type="text/javascript" src="js/prop-types.js"></script>
    <script type="text/babel">
    
      class Person extends React.Component{
          render(){
              const {name,age,sex}=this.props
              return(
                  <ul>
                    <li>姓名：{name}</li>
                    <li>性别：{sex}</li>
                    <li>年龄：{age}</li>
                </ul>
              )
          }
      }
   	//对标签属性进行类型、必要性的限制
		Person.propTypes = {
			name:PropTypes.string.isRequired, //限制name必传，且为字符串
			sex:PropTypes.string,//限制sex为字符串
			age:PropTypes.number,//限制age为数值
			speak:PropTypes.func,//限制speak为函数
		}
		//指定默认标签属性值
		Person.defaultProps = {
			sex:'男',//sex默认值为男
			age:18 //age默认值为18
		}

        ReactDOM.render(<Person name="tom" age={18} sex="man"/>,document.getElementById('test'))
        ReactDOM.render(<Person name="jerry" age={28} sex="woman"/>,document.getElementById('test2'))

        const p={name:'andy',sex:"woman",age:19}
        console.log('@',...p);

        	console.log('@',{...p});
		// ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex}/>,document.getElementById('test3'))
        ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))
        function speak(){
			console.log('我说话了');
		}
    </script>
</body>
</html>

props的简写方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
         	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	<div id="test2"></div>
	<div id="test3"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="js/babel.min.js"></script>
    <script type="text/javascript" src="js/prop-types.js"></script>
    <script type="text/babel">
    
      class Person extends React.Component{
          render(){
              const {name,age,sex}=this.props
              return(
                  <ul>
                    <li>姓名：{name}</li>
                    <li>性别：{sex}</li>
                    <li>年龄：{age}</li>
                </ul>
              )
          }
          static propTypes = {
			name:PropTypes.string.isRequired, //限制name必传，且为字符串
			sex:PropTypes.string,//限制sex为字符串
			age:PropTypes.number,//限制age为数值
			speak:PropTypes.func,//限制speak为函数
		}
		//指定默认标签属性值
		static defaultProps = {
			sex:'男',//sex默认值为男
			age:18 //age默认值为18
		}
      }
   	//对标签属性进行类型、必要性的限制
	

       ReactDOM.render(<Person name="jerry"/>,document.getElementById('test'))
        ReactDOM.render(<Person name="jerry" age={28} sex="woman"/>,document.getElementById('test2'))

        const p={name:'andy',sex:"woman",age:19}
        console.log('@',...p);

        	console.log('@',{...p});
		// ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex}/>,document.getElementById('test3'))
        ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))
        function speak(){
			console.log('我说话了');
        }
        
    </script>
</body>
</html>

函数组件使用props

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>对props进行限制</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test1"></div>
	<div id="test2"></div>
	<div id="test3"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>
	<!-- 引入prop-types，用于对组件标签属性进行限制 -->
	<script type="text/javascript" src="../js/prop-types.js"></script>

	<script type="text/babel">
		//创建组件
		function Person (props){
			const {name,age,sex} = props
			return (
					<ul>
						<li>姓名：{name}</li>
						<li>性别：{sex}</li>
						<li>年龄：{age}</li>
					</ul>
				)
		}
		Person.propTypes = {
			name:PropTypes.string.isRequired, //限制name必传，且为字符串
			sex:PropTypes.string,//限制sex为字符串
			age:PropTypes.number,//限制age为数值
		}

		//指定默认标签属性值
		Person.defaultProps = {
			sex:'男',//sex默认值为男
			age:18 //age默认值为18
		}
		//渲染组件到页面
		ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))
	</script>
</body>
</html>

I have a lemon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React04——组件实例三大属性之props属性

理解每个组件对象都会有props(properties的简写)属性组件标签的所有属性都保存在props中作用通过标签属性从组件外向组件内传递变化的数据注意: 组件内部不要修改props数据编码操作内部读取某个属性值 this.props.name 对props中的属性值进行类型限制和必要性限制第一种方式（React v15.5 开始已弃用）： Person.propTypes = { name: Reac...
复制链接

扫一扫