React知识点回忆（二）

最新推荐文章于 2024-04-15 19:05:02 发布
最新推荐文章于 2024-04-15 19:05:02 发布
阅读量243 收藏
点赞数
分类专栏： React 文章标签： react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46198981/article/details/120526792
版权

一、组件 & Props

1、在函数组件中使用 props

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 定义字符编码 -->
  <meta charset="UTF-8">
  <!-- 引入react核心库 -->
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <!-- 引入react-dome 支持react操作dom -->
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <!-- 引入babel 将jsx转换为js -->
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  <!-- 定义网页标题 -->
  <title>React</title>
</head>
<body>
  <div id="box"></div>
  <script type="text/babel">

  function Cpn(props) {
    return (
      <div>
        <span>name：{props.name}</span>
      </div>
    )
  }

  ReactDOM.render(<Cpn name="Ralph" />, document.getElementById('box'))
  </script>
</body>
</html>

props属性是默认传递的，默认值是一个空对象，它会自动收集定义在组件上的属性，并绑定到props对象上。

  • 当属性过多时，我们可以使用对象的方式传递 attr

    <script type="text/babel">

function Cpn(props) {
  return (
    <div>
      <p>name：{props.name}</p>
      <p>age：{props.age}</p>
      <p>gender：{props.gender}</p>
    </div>
  )
}

// 定义需要传递的属性
const attr = {
  name: 'Ralph',
  age: 20,
  gender: 'man'
}

ReactDOM.render(<Cpn {...attr} />, document.getElementById('box'))
</script>

    注意：扩展运算符是不能直接去扩展一个对象的，因为对象不存在 iterator接口的，所以我们需要通过 {...obj} 的形式扩展一个对象，在 React 中 {} 并不是代表一个对象，而是说明在此处可以使用javascript表达式，React 会自动去识别当前的对象并将其扩展。

  • 通过 prop-types 依赖包对props属性的类型进行检查

    1、引入 prop-type 依赖包

    <script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>

    2、设置实例静态属性 propTypes 定义属性的接收类型

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

    上述代码中，PropTypes 是由 prop-types 依赖包所提供的关键字，它对外提供了一系列 验证器 ，可用于确保组件接收到的数据类型是有效的。string 代表定义的属性必须为字符串类型，isRequired 代表定义的属性是必传的。

    3、对props中的属性定义初始值（默认值）

    Cpn.defaultProps = {
  gender: 'man'
}

2、在类组件中使用 props

<script type="text/babel">

  class Cpn extends React.Component {
    render (){
      return (
        <div>
          <p>name：{this.props.name}</p>
          <p>age：{this.props.age}</p>
          <p>gender：{this.props.gender}</p>
        </div>
      )
    }
  }

    // 定义属性的类型
  Cpn.propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number.isRequired,
    gender: PropTypes.string
  }

  Cpn.defaultProps = {
    gender: 'man'
  }

  // 定义需要传递的属性
  const attr = {
    name: 'Ralph',
    age: 20
  }

  ReactDOM.render(<Cpn { ...attr } />, document.getElementById('box'))
</script>

细心观察，可以发现类组件中的render函数中，我们可以使用 this.props 拿到父组件传递过来的 props，我们不妨可以大胆猜测，当我们自定义一个函数时，是否同样也能通过 this.props 拿到我们想要的结果。

  <script type="text/babel">

    class Cpn extends React.Component {
      constructor() {
        this.getProps()
      }

      render (){
        return (
          <div>
            <p>name：{this.props.name}</p>
            <p>age：{this.props.age}</p>
            <p>gender：{this.props.gender}</p>
          </div>
        )
      }

      // 自定义方法
      getProps (){
        console.log(this.props)
      }
    }

    // 定义属性的类型
    Cpn.propTypes = {
      name: PropTypes.string.isRequired,
      age: PropTypes.number.isRequired,
      gender: PropTypes.string
    }

    Cpn.defaultProps = {
      gender: 'man'
    }

    // 定义需要传递的属性
    const attr = {
      name: 'Ralph',
      age: 20
    }

    ReactDOM.render(<Cpn { ...attr } />, document.getElementById('box'))
  </script>

运行效果如下：
在这里插入图片描述
我们仔细观察报错信息，不难发现，它是想提示我们要在this之前去调用一次 super，好的，我们按照提示加上这个关键字

  <script type="text/babel">

    class Cpn extends React.Component {
      constructor() {
        super()
        this.getProps()
      }

      render (){
        return (
          <div>
            <p>name：{this.props.name}</p>
            <p>age：{this.props.age}</p>
            <p>gender：{this.props.gender}</p>
          </div>
        )
      }

      // 自定义方法
      getProps (){
        console.log(this.props)
      }
    }

    // 定义属性的类型
    Cpn.propTypes = {
      name: PropTypes.string.isRequired,
      age: PropTypes.number.isRequired,
      gender: PropTypes.string
    }

    Cpn.defaultProps = {
      gender: 'man'
    }

    // 定义需要传递的属性
    const attr = {
      name: 'Ralph',
      age: 20
    }

    ReactDOM.render(<Cpn { ...attr } />, document.getElementById('box'))
  </script>

运行效果如下：
在这里插入图片描述
我们再去仔细阅读官网，官网上有这样一句话：Class 组件应该始终使用 props 参数来调用父类的构造函数。 好的，我改！！！

  <script type="text/babel">

    class Cpn extends React.Component {
      constructor(props) {
        super(props)
        this.getProps()
      }

      render (){
        return (
          <div>
            <p>name：{this.props.name}</p>
            <p>age：{this.props.age}</p>
            <p>gender：{this.props.gender}</p>
          </div>
        )
      }

      // 自定义方法
      getProps (){
        console.log(this.props)
      }
    }

    // 定义属性的类型
    Cpn.propTypes = {
      name: PropTypes.string.isRequired,
      age: PropTypes.number.isRequired,
      gender: PropTypes.string
    }

    Cpn.defaultProps = {
      gender: 'man'
    }

    // 定义需要传递的属性
    const attr = {
      name: 'Ralph',
      age: 20
    }

    ReactDOM.render(<Cpn { ...attr } />, document.getElementById('box'))
  </script>

效果如下：
在这里插入图片描述
此时，效果正是我们想要的效果，并得到一条结论：当我们重写构造函数时应该要通过 super 关键字调用父类构造函数，并传入props作为参数

接下来让我们利用 Es6 语法改善一下代码

  <script type="text/babel">

    class Cpn extends React.Component {

	  static defaultProps = {
         gender: 'man'
      }

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

      render (){
        return (
           <div>
             <p>name：{this.props.name}</p>
             <p>age：{this.props.age}</p>
             <p>gender：{this.props.gender}</p>
           </div>
         )
       }
      
    }

    // 定义需要传递的属性
    const attr = {
      name: 'Ralph',
      age: 20
    }

    ReactDOM.render(<Cpn { ...attr } />, document.getElementById('box'))
  </script>
@Ralph
关注
专栏目录
React---基本入门知识
qq_46065861的博客
11-02 1298
自己有道云的文档 一、简介 React是目前前端较为流行的框架，是用 JavaScript 构建快速响应的大型 Web 应用程序的首选方式。 2013年由FaceBook进行开源，我们将React 16以后的版本，称之为React Fiber(使react运行更加的流畅，特别是复杂的动画) 属于MVC设计模式 M model V view C control(即为模型层影响控制层，控制层影响视图层) 相关技术栈：React-Router Redux React Native React VR Ho
React系列知识——React基础
Smart_J_King的博客
01-18 887
React.js 使用起来相对更加灵活，用户可配置性更高；Vue.js 使用起来相对简洁，因为Vue 开放了许多API，但是因为诸多API在灵活性上被限制。 React开发环境准备 使用 React 的方式 1.通过<script>标签引入 .js 文件来使用 2.通过 create-react-app 脚手架工具 安装 npx npx create-react-app my-app npx 是 npm 5.2+ 及更高版本附带的包运行工具 npm npm init re
React（一）- React简介与基本使用
Zong_0915的博客
03-29 587
React（一）- React简介与基本使用前言一. React简介1.1 原生JS的弊端1.2 React的引用和相关文件作用二. React的基本使用2.1 HelloWorld案例及其易错点2.2 虚拟DOM2.2.1 创建虚拟DOM的两种方式（React）2.2.2 虚拟/真实DOM2.3. JSX语法规则三. Demo-JSX练习 前言 本系列是我学习React的一些学习笔记，主要参考B站张天禹老师的视频。 一. React简介 React是一个构建用户界面的JS库，用于操作DOM呈现界面，将数据
当vue里面props属性type为数组或者对象需要设置默认值为空数组或对象
我的博客
07-26 7009
一、vue官方文档解释为该prop指定一个默认值。如果该prop没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
vue2中props属性设置一个对象或数组的默认值
最新发布
weixin_46504400的博客
04-15 995
在Vue.js中，如果您想要为一个props属性设置一个对象或数组的默认值，您应该使用一个函数来返回这个默认值。这是因为对象和数组是引用类型，直接将它们作为默认值可能会导致预设的默认值被所有实例共享，这不是我们想要的结果。在这个示例中，我们定义了一个名为myObjectProp的props属性，其类型为Object。然后，我们提供了一个默认值函数，它返回一个新的对象。这样，每个实例都会有自己的默认值对象，而不是共享同一个对象。
react系列从零开始_简单谈谈react
01-19
这篇react的系列博客会覆盖react目前的所有知识点： 一、React基础 1.React 虚拟DOM概念，React的性能高效的核心算法 2.React组件，理解什么叫组件化 3.React组件嵌套 4.JSX内置表达式 5.React的生命周期 二、React...
bookmoduleAlessoninalab知识点PPT学习教案.pptx
10-06
【知识点详解】 1. **conclude** - 推断出，得出结论 在学习或工作中，conclude常用于表达根据已知事实或证据得出一个结论。例如，"What can you conclude from these facts?"（你能从这些事实中得出什么结论？） ...
我的 React 最佳实践
「 虚幻私塾」
11-02 415
以上的相关实践，是本人在日积月累中总结和摸索出来的。如有雷同，说明你和我有一样的感受。
高级java笔试题-reactApp:React应用
06-03
为了可以在面试前有一份资料能够帮助我们以最快的速度复习较为全面的知识点，一开始初衷想着只列出技术要点，能帮助回忆技术知识体系就行了。但是发现越整理知识越多，技术体系就越庞大。所以就想着分享出来，希望对...
回忆录
02-09
这个压缩包文件包含了一个基于MERN堆栈的应用程序源代码，让我们来深入探讨一下其中的知识点。 首先，MongoDB是一个NoSQL数据库，它使用文档型数据模型，特别适合处理非结构化和半结构化的数据。在JavaScript中，...
vue组件props数组对象传参的默认值
lance_heart的博客
04-15 6097
在组件中接受props参数时，如果接受的是数组或对象类型，则default值应该用一个方法return返回 否则报错： Invalid default value for prop “slides”: Props with type Object/Array must use a factory function to return the default value props: { parentlistAr: { type: Array, defau.
vue 主组件把日期选择器给子组件props传obj值, 与子组件监听 watch对象或对象属性
tenc1239的博客
08-23 594
【代码】vue 主组件把日期选择器给子组件props传obj值, 与子组件监听 watch对象或对象属性。
组件传递数据——props（父传子）
weixin_46372993的博客
08-03 5775
props的用法（1）Parent组件：< template > < h3 > {{ message }} < Child /> //3、显示Child组件内容 < script > import Child from './Child.vue';//1、导入Child组件 export default {data() {return {Child } //2、注入Child组件 }
vue中props设置默认值
热门推荐
cecoal的博客
07-28 1万+
但是，如果初始化的时候就使用里面的值，可能会出现没有该值的情况，此时就会报错。应该使用以下有默认值的写法。
【React】条件地给组件添加属性(attribute)
ic_esnow的博客
10-20 2067
使用前端React框架时，在标签中，给attribute赋一个js的bool值（true或者false），这样做并不是给attribute赋了一个true或者false的值， 而是条件地给组件添加属性(attribute)。 例如下面的Button组件有disabled这个属性 <Button disabled={true}> 登录 </Button> 下面的Button组件则没有disabled这个属性 <Button disabled={false}&
react-踩坑记录——Link带参数跳转后this.props为空对象
weixin_34389926的博客
10-13 1447
原因，自组件在挂载时，父组件没向其传props划线部分不可缺少！！！！！！ 转载于:https://www.cnblogs.com/LLLLily/p/7661983.html
react 将object对象渲染dom的方法
WEB木易
08-14 3016
首先将object对象转换成对象 let newarr=[] for (let i in item){ Object.keys(item).map((key) => newarr.push(item[key])) return( <div className="sanji-menu"> ...
vue props默认值大坑
xuelang532777032的博客
12-11 1万+
正常的场景是这样的    &lt;div&gt;       &lt;el-table :height="tableH"&gt;         &lt;slot&gt;&lt;/slot&gt;       &lt;/el-table&gt; &lt;/div&gt; 这是 element-ui的table组件   那边 props绑定一个heght  变量  tableH 意思是可
[react] this.props 为空集合 {}
qq_29850249的博客
05-23 2549
第一种解决方法 给子组件传 tihs.props import React from 'react' import { Redirect, Route, Switch } from 'react-router-dom' export default class Admin extends React.Component { render(){ return( <Switch> {/* 传值 */} <Route path='/' {..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

@Ralph

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

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

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

打赏作者

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

抵扣说明：

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

余额充值