专栏首页菜鸟计划组件与props简解

组件与props简解

一、创建组件

1.函数式创建

二、组件渲染

单闭合调用(只能传props的值)
<Title />

双闭合调用 (标签内还可以写子标签) 
<Title></Title>

三.属性

调取组件的时候,传递给组件的信息(render渲染的时候会把props传递给组件,props就是属性)

作用:让组件丰富化(传递不同的属性控制组件展示不同的效果)

特点:传递进来的属性在组件内部不能修改,也就是它是“只读的”。(修改属性的值,只能重新调取组件并且重新传递值)

虽然不可以修改属性值,但是在类创建组件的方式中,我们可以给组件设置默认值和设置一些规则。

import React from 'react';

import PropTypes from 'prop-types';  //使用 PropTypes 进行类型检查

class Say extends React.Component{
  //设置默认值
  static defaultProps = {
    title: 'hello word'
  }
  //设置默认规则
  static propTypes = {
    title: PropTypes.string,
    num: PropTypes.number.isRequired
  }
  constructor(props){
    //当super中没有传入props时
    /**
    * 1.在调用组件开始执行constructor,参数props是传递进来的属性信息(而且是经过defaultProps和propTypes等处理过的)
    * 2.但是此时还没有挂载到实例上,所以this.props的结果是undefined
    * 3.constructor结束后,挂载就完成了,所以其它生命周期函数中是可以基于this.props来获取属性的
    */
    // super();
    // console.log(props, this.props) //{title: "two", num: 20} undefined

    //当super中传入props时
    /**
    * 会在当前实例上挂载很多私有属性
    * this.props = props;
    * this.context = context;
    * this.refs = {};
    * 现在不这样处理,当constructor执行完成,react也会帮我们给实例挂载这些属性
    */
    super(props); //call继承:React.Component.call(this)
    console.log(props, this.props) //{title: "two", num: 20} {title: "two", num: 20}

    //实例上还可以调取Component类的两个方法
    /**
    * this.setState()
    * this.forceUpdate()
    */
  }
  render() {
    return (
      <p>{this.props.title}</p>
    )
  }
}
// Say.propTypes = {
// title: PropTypes.string
// }
export default Say;

<Say title={'two'} num={20}></Say>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue组件详解(三)——组件通信

    组件之间通信可以用下图表示: ? 组件关系可分为父子组件通信、兄弟组件通信、跨级组件通信。 一、自定义事件 当子组件需要向父组件传递数据时,就要用到自定义事件。...

    柴小智
  • vue组件详解(二)——使用props传递数据

    在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递。父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息。看看它们是...

    柴小智
  • 写一个简单的轮播组件

    柴小智
  • React基础(5)-React中组件的数据-props

    开发一个React应用,更多的是在编写组件,而React组件最小的单位就是React元素,编写组件的最大的好处,就是实现代码的复用

    itclanCoder
  • React学习(2)——状态、事件与动态渲染 原

        上一篇文章最后说明了组件传入的参数必须是只读的,但是在丰富的前端应用中,页面样式是时时刻刻会发生变化的。在前面的章节中介绍了一个时钟的例子,通过重复调用...

    随风溜达的向日葵
  • react学习

    JSX是一个JavaScript的语法扩展。因为JSX在语法上更简洁JavaScript而不是HTML,所以React DOM使用cameCase来定义属性的名...

    Cloud-Cloudys
  • React基础语法

    JSX语法中,可以在大括号内放置任何有效的JavaScript表达式。例如2+2、user.firstName或formatName(user)等均是有效的Ja...

    前端_AWhile
  • 谈一谈创建React Component的几种方式

    当我们谈起React的时候,多半会将注意力集中在组件之上,思考如何将页面划分成一个个组件,以及如何编写可复用的组件。但对于接触React不久,还没有真正用它做一...

    前端博客 : alili.tech
  • (转) 谈一谈创建React Component的几种方式

    原文地址:http://www.cnblogs.com/Unknw/p/6431375.html

    mafeifan
  • React 最佳实践——那些 React 没告诉你但很重要的事

    前言:对很多 react 新手来说,网上能找到的资源大都是些简单的 tutorial ,它们能教会你如何使用 react ,但并不会告诉你怎么在实际项目中优雅的...

    前端博客 : alili.tech

扫码关注云+社区

领取腾讯云代金券