React 学习笔记 —— props 属性

最新推荐文章于 2023-12-06 11:02:58 发布

tanleiDD

最新推荐文章于 2023-12-06 11:02:58 发布

阅读量381

点赞数

分类专栏： React 文章标签： reactjs

本文链接：https://blog.csdn.net/TL18382950497/article/details/115387045

版权

React 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

基本用法

this.state 是组件内部产生的数据
this.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>Document</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="app1"></div>
    <div id="app2"></div>
    <div id="app3"></div>
    <script type="text/babel">
        class Person extends React.Component {
            render () {
            	// 从实例的 props 属性获取传递的参数
                const {name, sex, age} = this.props
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{sex}</li>
                        <li>年龄：{age}</li>
                    </ul>
                )
            }

        }
        // 通过 属性 给组件传递参数
        ReactDOM.render(<Person name="jerry" age="19" sex="男"/>, document.getElementById('app1'))
        ReactDOM.render(<Person name="tom" age="18" sex="女"/>, document.getElementById('app2'))
        // 一次传递多个属性
        const person = {name: '老刘', age: '30', sex='女'}
        ReactDOM.render(<Person {...person}/>, document.getElementById('app3'))
    </script>
</body>
</html>

类型约束

<!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>Document</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <!-- 提供类型约束，对组件标签属性进行限制 -->
    <!-- 引入后，会为全局提供一个 PropTypes 对象 -->
    <script src="../js/prop-types.js"></script>
</head>
<body>
    <div id="app1"></div>
    <div id="app2"></div>
    <div id="app3"></div>
    <script type="text/babel">
        class Person extends React.Component {
            render () {
                const {name, sex, age} = this.props
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{sex}</li>
                        <li>年龄：{age}</li>
                    </ul>
                )
            }

        }
        // 在组件类的 propTypes 上添加类型约束描述
        Person.propTypes = {
			name: PropTypes.string,	// 限制 name 必须为 string 类型
			sex: PropTypes.string.isRequired,    // 限制 sex 必须为 string 类型，且是必需的
			method: PropTypes.func,	// 函数类型约束为 func，因为 function 是声明函数的关键字，需要闭开

		}
        ReactDOM.render(<Person name="jerry" age="19" sex="男"/>, document.getElementById('app1'))
        ReactDOM.render(<Person name="tom" age="18" sex="女"/>, document.getElementById('app2'))
        ReactDOM.render(<Person name="老刘" age="30" sex="女"/>, document.getElementById('app3'))
    </script>
</body>
</html>

默认值参数

<!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>Document</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <!-- 提供类型约束，对组件标签属性进行限制 -->
    <!-- 引入后，会为全局提供一个 PropTypes 对象 -->
    <script src="../js/prop-types.js"></script>
</head>
<body>
    <div id="app1"></div>
    <div id="app2"></div>
    <div id="app3"></div>
    <script type="text/babel">
        class Person extends React.Component {
            render () {
                const {name, sex, age} = this.props
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{sex}</li>
                        <li>年龄：{age}</li>
                    </ul>
                )
            }

        }
        // 在组件类的 propTypes 上添加类型约束描述
        Person.defaultProps = {
            sex: "男",
            age: "18"
        }
        ReactDOM.render(<Person name="jerry" age="19" sex="男"/>, document.getElementById('app1'))
        ReactDOM.render(<Person name="tom" age="18" sex="女"/>, document.getElementById('app2'))
        ReactDOM.render(<Person name="老刘" age="30" sex="女"/>, document.getElementById('app3'))
    </script>
</body>
</html>

约束、默认值的简写

class Person extends React.Component {
    render () {
        const {name, sex, age} = this.props
        return (
            <ul>
                <li>姓名：{name}</li>
                <li>性别：{sex}</li>
                <li>年龄：{age}</li>
            </ul>
        )
    }
    // 在组件类的 propTypes 上添加类型约束描述
	static propTypes = {
		name: PropTypes.string,	// 限制 name 必须为 string 类型
		sex: PropTypes.string.isRequired,    // 限制 sex 必须为 string 类型，且是必需的
		method: PropTypes.func,	// 函数类型约束为 func，因为 function 是声明函数的关键字，需要闭开

	}
	// 在组件类的 propTypes 上添加类型约束描述
	static defaultProps = {
	    sex: "男",
	    age: "18"
	}
	// 通过 static 关键字，可以将方法、属性设置在构造函数上
}

props是只读的

注意, props 是只读的，不能够直接进行修改，例如：this.props.name='test'，是会报错的
但如果传入的props属性是引用类型，this.props.obj.name='test'，是可以修改成功的，但不要这样做，因为：

在组件内部修改传入的引用类型，会很混乱，很难确定是谁在修改数据
就算在组件内通过this.props修改了引用类型也不会触发视图更新，因此是无意义的

标签体的内容

标签体的内容，会作为 props 的 children 属性传入

构造器中的 props

class Person extends React.Component {
    constructor (props) {
        super(props)
        console.log(this.props)	
        // 如果给 super 传递 props，那么在 constructor 中，可以通过 this.props 中可以访问到传入的属性
        // 如果不给 super 传递 props，那么在 constructor 中，通过 this.props 访问不到传入的属性
        // 效果很鸡肋，因此，在 constructor 中，可以直接通过 props 访问，而不需要通过 this.props
    }
    render () {
    	// 其他函数里，对 this.props 的访问没有任何区别
        const {name, sex, age} = this.props
        return (
            <ul>
            	<li>姓名：{name}</li>
				<li>性别：{sex}</li>
				<li>年龄：{age}</li>
            </ul>
        )
    }

}

ReactDOM.render(<Person name="tom" age="18" sex="女"/>, document.getElementById('app'))

如下

 constructor (props) {
     super(props)
     console.log('constructor', this.props)
 }

在这里插入图片描述

 constructor (props) {
     super()
     console.log('constructor', this.props)
     console.log('constructor', props)
 }

在这里插入图片描述

函数式组件中的props

// 通过组件属性传入的参数，会被封装成构造函数的 props 对象
function Person (props) {
    const {name, sex, age} = props
    return (
        <ul>
            <li>姓名：{name}</li>
            <li>性别：{sex}</li>
            <li>年龄：{age}</li>
        </ul>
    )
}
// 同样可以进行类型约束
Person.propTypes = {
	name: PropTypes.string,	// 限制 name 必须为 string 类型
	sex: PropTypes.string.isRequired,    // 限制 sex 必须为 string 类型，且是必需的
	method: PropTypes.func,	// 函数类型约束为 func，因为 function 是声明函数的关键字，需要闭开
}
// 同样可以进行默认值设置
Person.defaultProps = {
    sex: "男",
    age: "18"
}

ReactDOM.render(<Person name="tom" age="18" sex="女"/>, document.getElementById('app'))

tanleiDD

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
React 学习笔记 —— props 属性

this.state 是组件内部产生的数据this.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=d.
复制链接

扫一扫