react props使用

最新推荐文章于 2022-10-10 10:58:20 发布
最新推荐文章于 2022-10-10 10:58:20 发布
阅读量84 收藏
点赞数
分类专栏： react 文章标签： 前端 reactjs react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43876728/article/details/119185811
版权

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>
    <!-- react核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- react-dom 用于操作dom -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- jsx 转义成js -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="./prop-types.js"></script>
</head>

<body>
    <div id='app'></div>
    <script type="text/babel">
        class Demo extends React.Component {
            constructor(props) {
                super(props)
                console.log(props) //{name: "aa", genger: "aaa", age: 18}
            }
            render() {
                const { name } = this.props
                return (
                    <h1>{name}</h1>
                )
            }
        }
        ReactDOM.render(
            <Demo name='aa' genger='aaa' age={20} />, document.getElementById('app'))
    </script>
</body>

</html>

子组件如未接收到父组件传递过来的值，可以用 static 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>Document</title>
    <!-- react核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- react-dom 用于操作dom -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- jsx 转义成js -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="./prop-types.js"></script>
</head>

<body>
    <div id='app'></div>
    <script type="text/babel">
        class Demo extends React.Component {
            constructor(props) {
                super(props)
                console.log(props) //{name: "aa", genger: "aaa", age: 18}
            }
            static defaultProps = {
                name: '默认值'
            };
            render() {
                const { name } = this.props
                return (
                    <h1>{name}</h1>
                )
            }
        }
        ReactDOM.render(
            <Demo  genger='aaa' age={20} />, document.getElementById('app'))
    </script>
</body>

</html>

propTypes限制父组件传递的值类型，以及要求

  • 下载yarn add prop-types
  • PropTypes.string/bool/number/func/obj/symbol/等限制格式
  •  propTypes.isRequired必填项
<!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>
    <!-- react核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- react-dom 用于操作dom -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- jsx 转义成js -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="./prop-types.js"></script>
</head>

<body>
    <div id='app'></div>
    <script type="text/babel">
        class Demo extends React.Component {
            constructor(props) {
                super(props)
                console.log(props) //{name: "aa", genger: "aaa", age: 18}
            }
            render() {
                return (
                    <h1>hello</h1> 
                )
            }
        }
        Demo.propTypes = {
            name: PropTypes.string.isRequired, //isRequired必须传入
            age: PropTypes.number,
            genger: PropTypes.string
        }
        Demo.defaultProps = {
            age: 18
        }
        ReactDOM.render(
            <Demo name='aa' genger='aaa' age={20} />, document.getElementById('app'))
    </script>
</body>

</html>

react 脚手架中使用

/*安装npm install --save prop-types*/
import React from 'react'
import PropTypes from 'prop-types'
export default  class DefalutVal extends React.Component {
    static defaultProps = {
        title: '默认值'
    };
    /*yarn add prop-types 下载 传参属性规则
     prop-types插件
     propTypes.isRequired必须传递
     PropTypes.string/bool/number/func/obj/symbol/node(元素节点)/element(jsx元素)/instanceof(xx)必须某个实例/oneOf([x1],[x2])多个中的一个等
     */
    static propTypes = {
        title: PropTypes.number //必须传入字符串 不符合规则控制台报错，页面正常渲染
    }
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>{this.props.title}</div>
        )
    }
}

 

前端-小鑫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react16：props的使用
richest_qi的博客
03-31 447
文章目录props的基本使用props的语法糖限制props props的基本使用 props的基本使用：<Person name="张三" gender="男" age="18"/>。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
react中props详解
white-hang的博客
12-27 7326
本文主要介绍了react中的props详细的使用方法
React中props用法详解
月光晒了很凉快的博客
09-22 1274
children 属性，表示组件标签的子节点，当组件标签有子节点时，props 就会有该属性，与普通的 props 一样，其值可以是任意类型。单标签和双标签中没有数据就没有此属性。
React的props基本使用及注意事项
秋来九月八
06-22 1555
props的基本使用 import React from 'react'; /** 子组件 */ class Person extends React.Component { render() { {/** 在this.props中接收来自父组件的参数 */} const { name, age, sex } = this.props return ( <ul> <li>姓
react中props的使用
编程之路
03-27 8665
在开发过程中，经常会遇到父组件和子组件之间相互通信，React子组件和父组件通信包括以下几个方面： 1，子组件调用父组件的方法 （1）子组件要拿到父组件的属性，需要通过 this.props 方法。 （2）同样地，如果子组件想要调用父组件的方法，只需父组件把要被调用的方法以属性的方式放在子组件上， 子组件内部便可以通过“this.props.被调用的方法”这样的方式来获取父组件传过来的方法。 2，...
React props 完整解析
qq_49900295的博客
10-10 1456
props 是 React 组件通信最重要的手段，它在 React 的世界中充当的角色是十分重要的。学好 props 可以使组件间通信更加灵活，同时文中会介绍一些 props 的操作技巧，和学会如何编写嵌套组件。
React Props
12-14
React Props state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。 使用 Props...
React-Native中props具体使用详解
08-29
本篇文章主要介绍了React-Native中props具体使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React props和state属性的具体使用方法
08-27
本篇文章主要介绍了React props和state属性的具体使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react hook使用分享
最新发布
10-13
React Hook 使用分享 React Hook 是 React 框架中的一种新式状态管理方案，旨在解决逻辑复用问题。下面是对 React Hook 的使用分享，包括为什么要用 Hook、Hook 与其他方案的对比、Hook 的使用技巧等。 一、为什么...
React-props
03-11
Create React App入门该项目是通过引导的。可用脚本在项目目录中，可以运行：npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误...
react中的props的使用
weixin_48952990的博客
08-07 533
react中的props的使用
【React】6.组件props的使用
没啥简介
05-15 650
【React】6.组件props的使用1. 简介2. 函数组件中的props3. 类组件中的props4. 进阶1. 可以给组件传递`任意类型`的数据2. props 是`只读`的对象，只能读取属性的值，无法修改对象3. 构造函数中使用props 1. 简介 组件是封闭的，要接收外部数据应该通过 props 来实现 props的作用：接收传递给组件的数据 传递数据：给组件标签添加属性 接收数据：函数组件通过参数props接收数据，类组件通过 this.props 接收数据 2. 函数组件中的props
React的props用法详解
Learn-anything.cn
11-17 1955
一、解决了什么问题？ props是组件（包括函数组件和class组件）间的内置属性，用其可以传递数据给子节点。 二、怎么使用？ 1、只读 props在传递数据的过程中，是只读的不能修改。 class App extends React.Component { // 第一步：给节点设置属性 `theme` render() { return <Toolbar theme="dark" />; } } function Toolbar(props) {
react 创建上下文（createContext）使用（超详细）
热门推荐
前端-小鑫
07-30 2万+
原本组件传递需要一层一层props传递，传递太过繁琐，例如以下代码： import React from 'react' function NeedData(props) { return <div>{props.value2}</div>; } // 中间组件 function Middle(props) { return ( <div> <NeedData value2={props.value} /&
React函数式Hooks-useMemo()用法
前端-小鑫
07-30 1020
useMemo根据条件是否渲染组件 useMemo与memo区别： menmo在渲染后执行 useMemo渲染中执行，且有返回值 useMemo只有满足回调的条件，接收定义的变量才会有值，否则都是0，例如count3只有满足count>3,count3才会不是0 不重复执行函数 import React, { Component, useState, useMemo } from 'react' function UsememoTemplate() { const [count, s
React生命周期
前端-小鑫
07-29 710
React的生命周期可以分为三个阶段：挂载、更新、卸载 constructor 初始化，接收两个参数props和context，如需使用参数需要使用super，且如果使用了constructor则必须使用super，否则thi指向将不正确 初始化 componentWillMount() constructor()初始化数据后，未渲染dom，组件准备挂载 componentDidMount() 组件第一次渲染完成，DOM生成， setState后组件会重新渲染，件挂载完毕
react 动画react-transition-group使用介绍
前端-小鑫
07-30 539
react-transition-group yarn add react-transition-group CSSTransition in：如果this.state.show从false变为true，则动画入场，反之out mountOnEnter：默认false 即使in 是false 组件也会正常加载，如果是true则不会加载，只会在in为true时加载 appear：默认false 加载后自动执行 enter：默认false 是否开启进入转换(关闭后不进入entering状态，直接进入
React函数式Hooks-useRef()用法
前端-小鑫
07-30 517
函数式组件本身就没有实例，所以没有dom等于无法通过ref获取，而useRef则可以提供获取函数式组件的dom 用途： 获取dom 获取共享数据 父组件获取子组件的dom import React, { useState, useCallback, useRef, PureComponent } from 'react' class Counter extends PureComponent { render() { const { props } = this;
react props使用方法
02-21
React props是一种在React中传递数据的方法，可以在组件之间共享信息。它使用JSX语法，可以在组件中将props作为属性传递，如<ComponentName propsName = "propsValue" />。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值