props的基本使用和特点

组件的props（ props是一个对象）

作用：接收传递给组件的数据
特点：1、可以给组件传递任意类型的数据
2、props是只读的对象，只能读取属性的值，无法修改对象
3、注意：使用类组件时，如果写了构造函数，应该将props传递给super()，否则，无法在构造函数中获取到props！！！
代码如下：

class One extends React.Component {constructor(props) {super(props)console.log(this.props)}render() {console.log(this.props)return (<div><h1>接收的数据: {this.props.name}</h1>{this.props.tag}{this.props.fn()}</div>)}
}

传递数据：给组件标签添加属性
接收数据：函数组件通过参数props接收数据，类组件通过this.props接收数据
函数组件

function One(props) {return (<div><h1>接收的数据: {props.name}</h1> </div>)
}

类组件

class One extends React.Component {render() {console.log(this.props)return (<div><h1>接收的数据: {this.props.name}</h1>{this.props.tag}{this.props.fn()}</div>)}
}

ReactDOM.render(<One name= "lannie" age={18} tag={<p>这是一个p标签</p>} color={["red","yellow","blue"]} fn={()=>{console.log('这是一个函数')}}/>, document.getElementById('root'))

props的基本使用和特点相关推荐

【译】为什么要写super(props)
译注: 原文地址 https://overreacted.io/why-do-we-write-super-props/ 正文我听说Hooks是新的热点.好笑的是,我想通过描述一些关于class组件 ...
props写法_简单理解vue中Props属性
本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下使用 Props 传递数据组件实例的作用域是孤立的.这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.可以使用 pr ...
vue打印props的值_vue中props传值方法
vue中props传值方法 1.开发环境 vue 2.电脑系统 windows10专业版 3.在使用 vue开发的过程中,我们经常会使用 props进行组件的传值,下面是我的分享,希望对你有所帮助! ...
vue中把props中的值赋值给data
父组件 <messageForm @createMsgCallback="addCreateMsg" :name="sendForm.name">& ...
子div超出父div_菜鸟学 react props 子到父
我们都知道在 vue 中可以使用事件将子组件的数据传递给父组件,也可以通过拿到父组件的实例直接调用父组件的方法先来个子组件 class ChildCom extends React.Componen ...
vue——props的两种常用方法
vue--props的两种常用方法 1.实现父-->子的通信举例如下: 父组件 parent.vue <children :channel="object1"> ...
Vue组件中的data和props属性
组件中数据的绑定在vue中数据通过data属性进行绑定,如下 <!DOCTYPE html> <html lang="en"> <head>& ...
React 深入系列３：Props 和 State
文:徐超,<React进阶之路>作者授权发布,转载请注明作者及出处 React 深入系列3:Props 和 State React 深入系列,深入讲解了React中的重点概念.特性和模式 ...
React组件常用设计模式之Render Props
自己在总结最近半年的React开发最佳实践时,提到了Render Props,想好好写写,但感觉篇幅又太长,所以就有了此文.愿你看完,能有所收获,如果有什么不足或错误之处还请指正.文中所提到的所有代码 ...
Vue教程3【使用Vue脚手架】render ref props minin scoped $emit $bus 消息订阅发布动画
npm全局安装切换淘宝npm镜像 npm config set registry https://registry.npm.taobao.org全局安装 npm install -g @vue/cl ...

props的基本使用和特点

组件的props（ props是一个对象）

props的基本使用和特点相关推荐

最新文章

热门文章

props的基本使用和特点

组件的props（ props是一个对象 ）

props的基本使用和特点相关推荐

最新文章

热门文章

组件的props（ props是一个对象）