react学习——09react中props属性

于 2024-06-21 15:01:26 发布
阅读量315 收藏 3
点赞数 5
分类专栏： react 文章标签： react.js 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ChenJin_2/article/details/139860258
版权

1、基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--    移动端适配-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1_props基本使用.html</title>
</head>
<body>
<!--准备一个容器-->
<div id="root"></div>
<div id="root2"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom.js库,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel，用于jsx的转换jsx-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/*此处一定要写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>
            )
        }
    }
    const p ={name:"jack",age:20,sex:"男"}
    ReactDOM.render(<Person name="tom" age="18" sex="女"/>,document.getElementById('root'))
    ReactDOM.render(<Person {...p}/>,document.getElementById('root2'))
</script>
</body>
</html>

2、props对属性进行限制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--    移动端适配-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2_props进行限制.html</title>
</head>
<body>
<!--准备一个容器-->
<div id="root"></div>
<div id="root2"></div>
<div id="root3"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom.js库,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel，用于jsx的转换jsx-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!--引入prop-types.js库，用于对组件的props进行类型限制-->
<script type="text/javascript" src="../js/prop-types.js"></script>
<!--用于对组件标签属性限制-->
<script type="text/babel">/*此处一定要写babel*/
    class Person extends React.Component{
        render(){
            const {name,age,sex}=this.props;
            return(
                    <ul >
                        <li>姓名：{name}</li>
                        <li>性别:{sex}</li>
                        <li>年龄:{age+1}</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
    }
    const p ={name:"jack",age:20,sex:"男"}
    ReactDOM.render(<Person name="tom" age={18} sex="女" speak={speak}/>,document.getElementById('root'))
    ReactDOM.render(<Person {...p}/>,document.getElementById('root2'))
    ReactDOM.render(<Person name="cj"/>,document.getElementById("root3"))
    function speak(){
        console.log("我说话了")
    }
</script>
</body>
</html>

3、简写方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--    移动端适配-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3_props简写.html</title>
</head>
<body>
<!--准备一个容器-->
<div id="root"></div>
<div id="root2"></div>
<div id="root3"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom.js库,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel，用于jsx的转换jsx-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!--引入prop-types.js库，用于对组件的props进行类型限制-->
<script type="text/javascript" src="../js/prop-types.js"></script>
<!--用于对组件标签属性限制-->
<script type="text/babel">/*此处一定要写babel*/
    class Person extends React.Component{
        //对标签属性进行类型限制、必要性的限制
        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
        }
        render(){
            const {name,age,sex}=this.props;
            return(
                    <ul >
                        <li>姓名：{name}</li>
                        <li>性别:{sex}</li>
                        <li>年龄:{age+1}</li>
                    </ul>
            )
        }
    }
    const p ={name:"jack",age:20,sex:"男"}
    ReactDOM.render(<Person name="tom" age={18} sex="女" speak={speak}/>,document.getElementById('root'))
    ReactDOM.render(<Person {...p}/>,document.getElementById('root2'))
    ReactDOM.render(<Person name="cj"/>,document.getElementById("root3"))
    function speak(){
        console.log("我说话了")
    }
</script>
</body>
</html>

4、函数式组件使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--    移动端适配-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4_props与构造器.html</title>
</head>
<body>
<!--准备一个容器-->
<div id="root"></div>
<div id="root2"></div>
<div id="root3"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom.js库,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel，用于jsx的转换jsx-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!--引入prop-types.js库，用于对组件的props进行类型限制-->
<script type="text/javascript" src="../js/prop-types.js"></script>
<!--用于对组件标签属性限制-->
<script type="text/babel">/*此处一定要写babel*/
    class Person extends React.Component{
        constructor(props) {
            //构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this方法props
            super(props);
            console.log("constructor",this.props)
        }

        //对标签属性进行类型限制、必要性的限制
        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
        }
        render(){
            const {name,age,sex}=this.props;
            return(
                    <ul >
                        <li>姓名：{name}</li>
                        <li>性别:{sex}</li>
                        <li>年龄:{age+1}</li>
                    </ul>
            )
        }
    }
    ReactDOM.render(<Person name="tom" age={18} sex="女" speak={speak}/>,document.getElementById('root'))
    function speak(){
        console.log("我说话了")
    }
</script>
</body>
</html>

效果
在这里插入图片描述

理解

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

作用

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

编码操作

1、内部读取某个值

this.props.propertyName

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

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

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

<Person {...person}/>

4、默认属性值

Person.defaultProps = {
	name: 'Mary' 
	}

5、组件类的构造函数

constructor (props) {
	super(props)
	console.log(props) // 查看所有属性
}
一叶飘零晋
关注
专栏目录
极智开发 | 讲解 React 组件三大属性之二：props
极智视界
08-03 232
大家好，我是极智视界，本文讲解一下 React 组件三大属性之二：props。
React学习——三大属性之一 state
weixin_39927469的博客
07-07 1868
React基础学习。学习三大属性之一，state。主要用于表示状态。
react-props属性
weixin_57218747的博客
05-31 239
react属性-props属性 一 props 的基本使用 需要理解的概念有： React中属性的传递方式，与class类的属性设置的差异区别 React中属性的接收方式 解构赋值的处理操作 属性定义传递，属性使用，属性设置（组件标签），属性接收（prop） <div id="test"></div> <div id="test2"></div> <script type="text/babel"> //定义Person组件 cl
react_props属性
BAIZHUKE的博客
07-15 252
在react里如果我们想要进行一个组件之间的传值我们就会用到props这个属性 （state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。） 1，子组件调用父组件的方法 （1）子组件要拿到父组件的属性，需要通过this.props方法。 （2）同样地，如果子组件想要调用父组件的方法，只需父组件把要被调用的方法以属性的方式放在子组件上， 子组件内部便可以通过“this.props.被调用的方法”这样的方式来获取父..
react的props属性
qq_44850230的博客
04-26 1600
props可以从外部像类传递参数，引入prop-types.js文档，利用propTypes进行类型和必要性的限制，利用defaultProps设置默认值，这两个属性应写在类本身上，所以用static定义（不推荐用Person.propTypes，实际开发不简洁），props不可修改 class Magic extends React.Component{ //对标签属性（props）进行类型、必要性的限制 写在类本身上 static prop
【React详细笔记】react组件三大属性之props属性
马云
09-12 283
文章目录实现思路步骤：jsx完整代码Person.propTypes 跟 Person.defaultProps方法展开运算符 需求：渲染对应的人员信息 实现思路步骤： 定义组件（可以使用工厂方法、也可以使用类实现） 指定默认属性值 对props的属性值进行限定 渲染组件 jsx完整代码 <script src="../js/react.development.js"></script> <script src="../js/react-dom.developme
React(一)——组件以及Props
我是我
10-09 1166
react组件/props
【React系列】父子组件通信—props属性传值
川峰的博客
01-02 1375
AppMainAppHeaderHeaderHeaderMainBanner总之，在一个React项目中，组件之间的通信是非常重要的环节；props。
什么是React.FC| 组件接受属性props有什么用 | ant design 封装独立弹框组件之-修改密码弹框组件
最新发布
西京刀客
01-04 1630
React提供了一个组件类型React.FunctionComponent，可简写React.FC。
react高阶组件添加和删除props
10-17
本文深入探讨了React中的高阶组件（HOC）如何用于动态地向传入组件添加或删除props属性。高阶组件是React中一种强大且灵活的模式，用于复用组件逻辑。本文的示例代码很好地展示了这一概念，并通过具体的例子演示了...
React-props.children属性
qq_41709082的博客
12-01 727
props.children使用 1.代码如下： class MyFirst extends React.Component { render(){ return ( &lt;div&gt; { this.props.children } &lt;/div&gt; ) } } ...
angular1.5 组件学习 -- 2.1、组件间的交互：父向子
weixin_30740295的博客
01-26 154
一个组件干一个事，一个完整的功能有时需要多个组件协调完成，这就少不了组件间的数据交互，那先来记录下父组件向子组件传递数据。 <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>父组件向子组件传...
React之Props属性使用总结
weixin_34216036的博客
03-18 955
故事:在刚开始学习react时候 会傻傻分不清props和state，导致在开发的时候 遇到问题就会很蒙蔽如果你觉得还是搞不清 state 和 props 的使用场景，那么请记住一个简单的规则：尽量少地用 state，尽量多地用 props。 没有 state 的组件叫无状态组件（stateless component），设置了 state 的叫做有状态组件（stateful component）...
【react全家桶学习】react中组件的props属性（详）
蜗牛~~
04-27 1922
（这种情况几乎不存在，在构造器中我们可以直接访问props而不是this.props，因此在实际开发中构造器就是能省略就省略，作用不大）应该加上花括号，react才会去读取花括号里面的东西（还记得vue里面吗，vue是在变量名加上冒号，代表读取变量，如。构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props。学过了vue的props属性，那react中的props属性如何使用呢？如果属性特别多，我们通过上面的方式传递十分繁琐，那如何批量传递呢？
React 组件的3大属性: props
嗯...
10-31 817
</div>// 子组件render() {// 子组件通过 this.props.message 访问父组件传递的数据return (<div>
深度讲解React Props
grooyo的博客
09-28 1384
每个组件对象都会有props(properties的简写)属性组件标签的所有属性都保存在props中通过标签属性从组件外向组件内传递变化的数据注意:组件内部不要修改props数据使用propTypes 属性并配合prop-types 三方库实现prop验证（不用另外下载，已集成在脚手架中）
2、Reactjs中的属性（this.props）
热门推荐
大前端程序猿
01-17 2万+
一、什么是属性 React官方文档上对于属性的介绍如下： React 里有一个非常常用的模式就是对组件做一层抽象。组件对外公开一个简单的属性（Props）来实现功能，但内部细节可能有非常复杂的实现。 React中的每一个组件，都包含有一个属性（props），属性主要是从父组件传递给子组件的，在组件内部，我们可以通过this.props获取属性对象 二、属性的使用方法
React学习：状态(State) 和 属性(Props)
若水弹丸之地
04-04 2万+
React ：元素构成组件，组件又构成应用。 React核心思想是组件化，其中 组件 通过属性(props) 和 状态(state)传递数据。 State 与 Props 区别 props 是组件对外的接口，state 是组件对内的接口。组件内可以引用其他组件，组件之间的引用形成了一个树状结构（组件树），如果下层组件需要使用上层组件的数据或方法，上层组件就可以通过下层组件...
react -- 传递 Props
Knight__D
08-02 2295
React 里有一个非常常用的模式就是对组件做一层抽象。组件对外公开一个简单的属性（Props）来实现功能，但内部细节可能有非常复杂的实现。 可以使用JSX 展开属性来合并现有的 props 和其它值： return Component {...this.props} more="values" />; 如果不使用 JSX，可以使用一些对象辅助方法如 ES6 的Obj
react 父子传值_React学习——通过模态框中的表单学习父子组件之间传值
05-17
React中父组件向子组件传值可以通过props实现，而子组件向父组件传值可以通过回调函数实现。 假设我们有一个父组件Modal，其中包含一个子组件Form，我们希望在Form表单中填写完数据后，将数据传递给Modal组件进行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一叶飘零晋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值