React 组件之属性

这篇具有很好参考价值的文章主要介绍了React 组件之属性。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

如果你想要实现自己的梦想,就必须先拥有勇气去追求它。

1. React Props

属性 props 主要解决两个问题:复用性问题以及可以让组件之间通信。

属性 props 正常是外部传入的,组件内部也可以通过一些方式来初始化的设置,属性不能被组件自己更改(属性是描述性质、特点的,组件自己不能随意更改),但是你可以通过父组件主动重新渲染的方式来传入新的 props。

工程组件代码里面有 props 的简单使用,总的来说,在使用一个组件的时候,可以把参数放在标签的属性当中,所有的属性都会作为组件 props 对象的键值。通过箭头函数创建的组件,需要通过函数的参数(形参)来接收 props:

(1) 在组件上通过 key=value 写属性,通过 this.props 获取属性,这样组件的可复用性提高了。

(2)注意在传参数时候,如果写成 isShow="'true" 那么这是一个字符串,如果写成 isShow={true} 这个是布尔值。

(3)对象传递可以通过 {...对象} 展开赋值,后面也可以加其它属性。

2. 属性默认值

2.1)类组件

类组件使用 defaultProps 给组件设置属性默认值。

// Navbar 自定义组件
// 默认属性值定义方法一:组件外部定义 - 不推荐
Navbar.defaultProps = {
  title: "默认标题"
}

// 默认属性值定义方法二:组件内部定义
static defaultProps = {
  title: "默认标题"
}

2.2)函数式组件

函数式组件直接使用函数参数默认值来设置 props 默认值。也可以通过 Navbar.defaultProps 来设置默认值,不推荐。

3. 属性类型验证

3.1)不做验证

直接通过 this.props 获取属性,不做任何验证。

3.2)prop-types

prop-types 是一个 React 属性校验库,使用如下:

import React, { Component } from 'react'
import kvTypes from 'prop-types'

// 状态只能内部自己使用,不能进行传递。属性是父组件传递过来的,this.props。
export default class Navbar extends Component {

  // 类属性定义方法二、类型验证
  static propTypes = {
    title: kvTypes.string,
    showLeft: kvTypes.bool,
    showRight: kvTypes.bool
  }

  render() {
    // 属性解构
    let { title, showLeft, showRight } = this.props
    return (
      <div>
        { showLeft && <button>返回</button> }
        navbar-{title}
        { showRight && <button>搜索</button> }
      </div>
    )
  }
}

// 类属性定义方法一、类型验证
// Navbar.propTypes = {
//   title: kvTypes.string,
//   showLeft: kvTypes.bool,
//   showRight: kvTypes.bool
// }

4. 函数式组件 Props

函数式组件 Props 是直接通过形式参数进行数据传递。参数验证和默认值只能通过 Navbar.propTypes 和 Navbar.defaultProps 设置。

import React from 'react'

export default function Slidbar(props) {
  return (
    <div>Slidbar</div>
  )
}

5. 插槽 slot

插槽(slot)是属性中的特殊属性,写法固定,能够在组件构建的时候向组件模版定义好的位置插入自定义的结构。插槽的作用可以总结为以下两点:文章来源地址https://www.toymoban.com/news/detail-747278.html

  • 能够使组件得到更好的复用;
  • 在一定程度减少父子通信;
import React, { Component } from 'react'

class Child extends Component {
  render() {
    return (
      <div>
        Child
        {/* 插槽 vue 叫 slot 属性中的特殊属性 */}
        { this.props.children[2]}
      </div>
    )
  }
}

export default class App extends Component {
  render() {
    return (
      <div>
        <Child>
          {/* 这里 div 中的内容是不会展示的,App 在渲染的时候,解析到 Child 组件的时候,
              Child 定义模版(上面定义)会替换掉下面构建的 Child 组件,这里加的 div 是不会被包裹显示的。 
              */}
          {/* 这里定义的结构会被挂到一个特别的属性上面:children  */}
          <div>组件中写内容1</div>
          <div>组件中写内容2</div>
          <div>组件中写内容3</div>
        </Child>
      </div>
    )
  }
}

到了这里,关于React 组件之属性的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React组件实例的三大属性

    React组件实例的三大属性分别是:state、props和refs。 State属性:用来存储组件内部的状态,只能在组件内部修改。当state被修改时,React会重新渲染组件。 Props属性:用来传递父组件的数据到子组件中,是组件的只读属性,无法在子组件中修改。当props被修改时,React会重新渲染

    2024年02月13日
    浏览(34)
  • react 父组件调用子组件的属性或方法

    在vue3中, 子组件会使用 defineExpose 暴露出父组件需要访问的 变量 或 方法 父组件通过 ref 函数定义子组件的 refName ,并通过 refName.value.xxx 继续访问 可使用 useImperativeHandle 、 forwardRef 、 useRef 第一步,子组件 使用 useImperativeHandle 定义要暴露出去的内容,第一个参数是 ref forw

    2024年04月22日
    浏览(31)
  • React 组件的3大属性: state

    组件被称为\\\"状态机\\\", 页面的显示是根据组件的 state 属性的数据来显示。 state 是一个用于存储和管理组件内部数据的机制。 它是一种在组件中跟踪状态变化的方式,以便在数据发生变化时,React 可以更新用户界面以反映这些变化。 state 的使用在构建交互式和动态的用户界面

    2024年02月10日
    浏览(38)
  • React 组件的3大属性: refs

    Refs(引用)是 React 中用于访问组件中的 DOM 元素或其他 React 组件实例的一种机制。它们提供了一种途径,使你可以在React中直接操作和访问DOM元素,或者在React组件之间进行通信。 用途: 焦点的管理、文本的选择、媒体的播放; 强制触发动画; 继承三方 DOM 库; 字符串 R

    2024年02月06日
    浏览(42)
  • react当我们有两个完全不相关的组件想要通信时,就可以利用这种模式,其中一个组件负责订阅某个消息,而另一个元素则负责发送这个消息。使用Context配合

    在nextjs项目中,发现两个组件没啥关系,例如一个是一直存在的头部组件,另一个是页面中的组件,当我点击头部组件中的特定按钮时,把数据传递到页面组件中,页面组件接受到canshu数据后在做其他操作,那么他们两个如何通讯,通过context配合观察者模式实现。 首先在其

    2024年02月15日
    浏览(48)
  • React三种通过属性传递组件本身的方法

    直接传递 JSX 创建好的元素 把要传递的组件作为 JSX 元素写在属性值里,然后在接收的组件里用 {this.props.xxx} 来渲染。这种方法的优点是直观和灵活,缺点是可能造成不必要的重复渲染。 直接传递 JSX 创建好的元素的方法会造成不必要的渲染,是因为每次父组件重新渲染时,

    2024年02月12日
    浏览(38)
  • React组件进阶之children属性,props校验与默认值以及静态属性static

    children 属性:表示该组件的子节点,只要组件有子节点,props就有该属性 children 属性与普通的 props 一样,值可以是任意值(文本、React元素、组件,甚至是函数) 核心代码 官网说明地址 对于组件来说,props 是外来的,无法保证组件使用者传入什么格式的数据 如果传入的数据

    2024年02月15日
    浏览(52)
  • 在 React 中,props(属性)用于在组件之间传递数据

    在 React 中,props(属性)用于在组件之间传递数据。它是父组件向子组件传递信息的一种方式,通过 props,父组件可以向子组件传递数据、回调函数、配置项等。 注意: props 是只读的,它的值由父组件传递给子组件时确定,并且在子组件中不能直接修改。如果子组件需要改

    2024年02月15日
    浏览(51)
  • React从入门到实战 -组件的三大核心属性(1)state

    State state是组件对象最重要的属性, 值是对象 (可以包含多个Key-value的组合) 组件被称为状态机,通过更新组件的state来更新对应的页面显示(重新渲染组件) 有状态的组件 除了使用外部数据(通过this.props访问)以外,组件还可以维护其内部的状态数据(通过this.state访问

    2024年02月10日
    浏览(36)
  • React学习时,自己拟定的一则小案例(table表格组件,含编辑)

    某次在Uniapp群看到有人问uniapp如何操作dom元素。 他想对这张表标红的区域,做dom元素获取,因为产品想让红色色块点击时,成为可编辑,渲染1~4月份之间的行程安排。 于是,有小伙伴说让他用position定位这里,点击时使红色色块层级抬高,弄个input上去。 但提问的小伙伴并没

    2024年02月07日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包