-
props
2018-07-11 10:42:34一、props介绍组件自身的属性对象、一般用于嵌套内外层组件中、负责传递传递数据、通常是由父层组件向子层组件传递。props对象中的属性与组件中的属性一一对应、不要直接修改props中的属性的值。二、案例/* 定义一...一、props介绍
- 组件自身的属性对象、一般用于嵌套内外层组件中、负责传递传递数据、通常是由父层组件向子层组件传递。
- props对象中的属性与组件中的属性一一对应、不要直接修改props中的属性的值。
二、案例
/* 定义一个WebShow组件,输出网址的名字和地址,网址是一个可以点击的链接 分析:定义一个组件WebName负责网址名字的输出,定义组件WebLink输出网址地址,并且可以打开链接 思路: 1.给WebShow设置两个属性,wName、wLink 2.WebShow的props增加了两个属性值 3.WebName从WebShow的props对象中获取wName的值,即网址的名称。 */
- 定义WebName组件,显示网站名称
注意:this.props.webname是接收父组件的传值。var WebName = React.createClass({ render : function(){ return <h1>{this.props.webname}</h1> } });
- 定义WebLink组件,显示网站网址
注意:this.props.weblink是接收父组件的传值。var WebLink = React.createClass({ render : function(){ return <a href={this.props.weblink}>{this.props.weblink}</a> } });
- 定义WebShow组合组件
注意:this.props.wname和this.props.wlink接收上级的传值,并且在这里将接收的值也传递给了子组件。var WebShow = React.createClass({ render : function(){ return ( <div> <WebName webname = {this.props.wname}/> <WebLink weblink = {this.props.wlink}/> </div> ) } });
- 渲染界面
注意:wname和wlink分别给WebShow组件传值。ReactDOM.render( <WebShow wname = "百度科技" wlink = "http://www.baidu.com"/>, document.getElementById("container") );
三、案例代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- react.js是react的核心库 --> <script src="./build/react.js" charset="utf-8"></script> <!-- react-dom.js的作用是提供与DOM相关的功能 --> <script src="./build/react-dom.js" charset="utf-8"></script> <!-- browser.min.js的作用是将JSX语法转换成JavaScrept语法 --> <script src="./build/browser.min.js" charset="utf-8"></script> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> --> </head> <body> <!-- React渲染的模板内容会插入到这个DOM节点中,作为一个容器 --> <div id="container"> </div> </body> <!-- 在React开发中,使用JSX语言,与JavaScrpt不兼容,在JSX的地方,要设置一下type为text/babel --> <!-- babel是一个转换编辑器,把ES6转换成可以在浏览器运行的代码 --> <script type="text/babel"> // 在此处编写React代码 /* props、state props :组件自身的属性对象、一般用于嵌套内外层组件中、负责传递传递数据、通常是由父层组件向子层组件传递 注意:props对象中的属性与组件中的属性一一对应、不要直接修改props中的属性的值 */ /* 定义一个WebShow组件,输出网址的名字和地址,网址是一个可以点击的链接 分析:定义一个组件WebName负责网址名字的输出,定义组件WebLink输出网址地址,并且可以打开链接 思路: 1.给WebShow设置两个属性,wName、wLink 2.WebShow的props增加了两个属性值 3.WebName从WebShow的props对象中获取wName的值,即网址的名称。 */ //定义WebName var WebName = React.createClass({ render : function(){ return <h1>{this.props.webname}</h1> } }); //定义WebLink var WebLink = React.createClass({ render : function(){ return <a href={this.props.weblink}>{this.props.weblink}</a> } }); //定义WebShow var WebShow = React.createClass({ render : function(){ return ( <div> <WebName webname = {this.props.wname}/> <WebLink weblink = {this.props.wlink}/> </div> ) } }); //渲染 ReactDOM.render( <WebShow wname = "百度科技" wlink = "http://www.baidu.com"/>, document.getElementById("container") ); </script> </html>
四、案例展示
-
React Props
2021-01-11 11:32:13一、React Props state和props的主要区别在于props是不可变的,而state可以根据与用户交互来改变; 这就是为什么有些容器组件需要定义state来更新和修改数据,而子组件只能通过props来修改数据。 二、使用Props...一、React Props
state和props的主要区别在于props是不可变的,而state可以根据与用户交互来改变;
这就是为什么有些容器组件需要定义state来更新和修改数据,而子组件只能通过props来修改数据。
二、使用Props
function HelloMessage(props) { return <h1>Hello {props.name}</h1>; } const element = <HelloMessage name="Runoob" />; ReactDOM.render( element, document.getElementById('example') );
实例中name属性通过props.name来获取。
三、默认Props
可以通过组件类的defaultProps属性为props设置默认值
class HelloMessage extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h1> ) } } HelloMessage.defaultProps = { name:'Runoob' }; const element = <HelloMessage/>; ReactDOMrender( element, document.getElementById('example') );
四、State和Props
class WebSite extends React.Component { constructor() { super(); this.state = { name: "菜鸟教程", site: "https://www.runoob.com" } } render() { return ( <div> <Name name={this.state.name} /> <Link site={this.state.site} /> </div> ); } } class Name extends React.Component { render() { return ( <h1>{this.props.name}</h1> ); } } class Link extends React.Component { render() { return ( <a href={this.props.site}> {this.props.site} </a> ); } } ReactDOM.render( <WebSite />, document.getElementById('example') );
五、Props验证
Props 验证使用了propTypes,它可以保证我们的应用组件被正确使用,React.PropType提供了很多验证器(validator)来验证传入的数据是否有效。
当向props传入无效数据时,JavaScript控制台会抛出警告。
以下实例创建一个Mytitle组件,属性title是必须的且是字符串,非字符串类型会自动转换成字符串;
var title = "菜鸟教程"; // var title = 123; var MyTitle = React.createClass({ propTypes: { title: React.PropTypes.string.isRequired, }, render: function() { return <h1> {this.props.title} </h1>; } }); ReactDOM.render( <MyTitle title={title} />, document.getElementById('example') );
-
props详解
2019-02-23 17:31:41文章目录propsthis.props.childrenstatic propTypesstatic defaultProps ReactNative系列-文章 props props是react组件的属性,一经指定,在被指定的组件的生命周期中则不再改变。在react组件中,所有的参数都放在...
ReactNative系列-文章props详解
props
props是react组件的属性,一经指定,在被指定的组件的生命周期中则不再改变。在react组件中,所有的参数都放在this.props属性里面,例如有如下的一个组件:
import React from 'react'; class Title extends React.Component { render() { return ( <div className="Title"> <Text>this.props.name</Text> </div> ); } } export default Title;
我们在其它组件内部引入上述Title组件:
class Content extends React.Component { render() { return ( <Title name="登陆" /> ... ); } }
在Title组件中,就可以通过this.props.name拿到传入的值(登陆)。通过这种方式,React 组件可以接受外部消息。
this.props.children
this.props里有一个比较特殊的参数this.props.children,它用来表示当前组件所包含的所有内容。例如我想在其它引用Content组件的标签里,添加标签,如下的样子:
class App extends React.Component { render() { return ( <Content name="登陆" > <div> ... </div> </Content> ); } }
直接添加肯定会报错,那么如何支持呢?使用this.props.children,它意味着组件内部可以拿到 用户在组件里面放置的内容。可以将Content组件改为这样:
class Content extends React.Component { render() { return ( <div> <Title name="登陆" /> {this.props.children} </div> ); } }
这样,在Content里就可以接收到用户在组件里面放置的内容了。
static propTypes
在定制组件的时候通常会给它传递一些属性,例如:
<FlatList data={[{key: 'a'}, {key: 'b'}]} renderItem={({item}) => <Text>{item.key}</Text>} />
propTypes允许我们规定属性的类型和是否必须传递。isRequeired说明该值不能为空,必须传递。我们对上述的Title组件进行属性定义:
import React from 'react'; import PropTypes from 'prop-types'; class Title extends React.Component { static propTypes = { name: PropTypes.string.isRequeired } render() { return ( <div className="Title"> <p>this.props.name</p> </div> ); } } export default Title;
其中name: PropTypes.string.isRequeired就表示该name属性类型为string,而且必须传递。
PropTypes可选的类型有:any/array/bool/func/number/object/string/node/element/symbol。
但是,如果我不想对name属性必须传递,我希望我不设置它的时候,它自己有默认值,这时候defaultProps就发挥了作用。
static defaultProps
给对象设置默认属性,如果组件中没有拿到传过来的属性值,则把这里默认的值赋给该属性。
我们对Title组件继续改写:
import React from 'react'; import PropTypes from 'prop-types'; class Title extends React.Component { static propTypes = { name: PropTypes.string } static defaultProps = { name: '标题' } render() { return ( <div className="Title"> <p>this.props.name</p> </div> ); } } export default Title;
这样,当我在Content组件中使用这个Title组件,就不需要一定设置name的属性值了。
class Content extends React.Component { render() { return ( <div> <Title></Title> {this.props.children} </div> ); } }
-
React教程之Props验证的具体用法(Props Validation)
2020-08-29 12:42:15主要介绍了React教程之Props验证的具体用法(Props Validation),非常具有实用价值,需要的朋友可以参考下 -
vue里面v-bind和Props 利用props绑定动态数据的方法
2020-10-18 03:35:33今天小编就为大家分享一篇vue里面v-bind和Props 利用props绑定动态数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
props类型
2020-07-15 10:03:09props: { // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 带...做个笔记,后面方便查看。
props: { // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 带有默认值的数字 propD: { type: Number, default: 100 }, // 带有默认值的对象 propE: { type: Object, // 对象或数组默认值必须从一个工厂函数获取 default: function () { return { message: 'hello' } } }, // 自定义验证函数 propF: { validator: function (value) { // 这个值必须匹配下列字符串中的一个 return ['success', 'warning', 'danger'].indexOf(value) !== -1 } } }
知识点来源官网:https://cn.vuejs.org/v2/guide/components-props.html?#Prop-%E9%AA%8C%E8%AF%81
-
react设置默认props及props数据类型
2019-07-09 20:58:33在react中父组件往子组件传值通过props属性,为了确保子组件不因props错误导致出错,因此需要对props进行一些初始化设置。 使用prop-types设置props类型 实例代码: import React, {Component} from 'react'; import... -
vue props
2017-09-06 14:59:12#props 用于接收来自父组件的数据(子组件期待获得的数据) 类型:字符串数组或者object e.g. 数组:props: ['size', 'myMessage'] 对象: props: { // 只检测类型 height: Number, // 检测类型 + 其他... -
props写法_深入理解vue中Props属性
2021-01-28 14:40:53使用 Props 传递数据组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。“prop” 是组件数据的一个字段,期望从父组件传下来。子组件需要... -
opencv300.props
2015-01-23 19:33:09opencv300.props,在VS2013下配置OpenCV3.0 必备 -
props验证
2019-06-18 21:57:26props:{ btnvalue:{ type:[Number,String], default:10, // 默认值 required:true //可以使用required选项来声明这个参数是否必须传入。 default与required 一般并不同时写 }, count:{ type:Number, }, ... -
关于Vue中props的详解
2018-07-23 00:11:08也就是props是子组件访问父组件数据的唯一接口。 详细一点解释就是: 一个组件可以直接在模板里面渲染data里面的数据(双大括号)。 子组件不能直接在模板里面渲染父元素的数据。 如果子组件想要引用父元素的... -
props传递对象_React 使用 Props 传递数据
2021-01-08 05:37:33我们可以认为向组件传递属性就像向函数传递参数,就像我们可以访问传入普通 JavaScript 函数的参数,我们也可以使用 this.props (或者在无状态函数式组件中使用props)访问组件的属性,所有属性都存储在这个对象上... -
组件 & Props
2021-01-17 21:15:23Props 组件:类似于Javascript函数。它接受任意的入参(即"Props"),并返回用于描述页面展示内容的React元素 函数组件与class组件 1. 函数组件: 接收唯一带有数据的 “props”(代表属性)对象与并返回一个 ... -
props数据验证
2020-08-24 22:28:04如果需要在子组件接收父组件数据时,对数据进行一些验证,需要用到props验证。在子组件接收父组件传递的数据,要用对象的方式,在对象中可以设置相应的验证规则。 1.数据类型验证 写法一: props:{ '参数名':数据... -
react中props属性传值以及props传递函数
2020-11-22 17:18:08react中父子组件传值以及调用方法props传值以及传递方法 父组件传值给子组件: 如果我需要把contatcFrom里面的值传给子组件,可以这样做: <Contact contatcForm={this.state.contatcForm} /> 子组件... -
props的使用
2019-12-04 23:47:57props:[‘acceptData1’,‘acceptData2’],与data、methods同级 有默认值 props:{ title:{ default:‘默认值’ } } 规定类型 props:{ title:{ type:String } } 规定类型且有默认值 props:{ title:{ type:... -
55Vue - Props(使用Props传递数据)
2019-07-29 10:47:30可以使用 props 把数据传给子组件。 prop 是父组件用来传递数据的一个自定义属性。子组件需要显式地用 props 选项 声明 “prop” Vue.component('child', { // 声明 props props: ['message'], // 就像 data 一样... -
react之props
2019-05-10 12:16:44react之props(属性),是纯函数的写法,不允许修改,props表示函数的输入。函数的输出是一个reactElement 用一个函数表示:V = f(props) -
props的写法
2019-10-07 22:56:39简写 ...props: ['demo-first', 'demo-second'] 带类型 props: { 'demo-first': Number, 'demo-second': Number } 带多种检查 props: { 'demo-first': { type: Number, default:... -
props写法_Vue内部怎样处理props选项的多种写法
2020-12-23 07:24:20开发过程中,props 的使用有两种写法:// 字符串数组写法const subComponent = {props: ['name']}// 对象写法const subComponent = {props: {name: {type: String,default: 'Kobe Bryant'}}}Vue在内部会对 props ... -
vue子组件赋值props_vue 父子传值props赋值失效问题
2020-11-25 04:09:45前天我的同事问了我一个问题,说她遇到一个父子组件之间的props赋值失效的问题,奇怪的是同一个页面另外一个地方也调用了同一个子组件并且props使用赋值正常,而且她和我说其他props能正常赋值,还就只有一个props:... -
React的props
2018-05-04 15:38:02props是父组件往子组件传东西不改变的值使用props,而改变的值我们要使用state,基本用法如下:class Happy extends React.Component { constructor(props) { super(props); } render() { return <h1&... -
props写法_详解Vue内部怎样处理props选项的多种写法
2021-01-28 14:40:54开发过程中,props 的使用有两种写法:// 字符串数组写法const subComponent = {props: ['name']}// 对象写法const subComponent = {props: {name: {type: String,default: 'Kobe Bryant'}}}Vue在内部会对 props ... -
vue打印props的值_vue中props传值方法
2021-01-14 06:37:51vue中props传值方法1.开发环境 vue2.电脑系统 windows10专业版3.在使用 vue开发的过程中,我们经常会使用 props进行组件的传值,下面是我的分享,希望对你有所帮助!4.在父组件添加如下代码:我是echarts模板封装import ... -
props的介绍
2019-02-27 17:30:07一、什么是属性 ...React中的每一个组件,都包含有一个属性(props),属性主要是从父组件传递给子组件的,在组件内部,我们可以通过this.props获取属性对象 二、属性的使用方法 react中主要有下面三种... -
React props
2016-03-03 17:07:32一、props用法来源组件的属性可以接受任意值,字符串、对象、函数等等都可以。有时,我们需要一种机制,验证别人使用组件时,提供的参数是否符合要求。1、PropTypes组件类的PropTypes属性,就是用来验证组件实例的... -
vue2.0 props
2018-07-04 10:05:57父组件传值给子组件 props1. 组件实例的作用域是孤立的,也就是说子组件的模板和模块是无法直接调用父组件的数据。 所以需要通过props将父组件的数据传递给子组件,子组件在接受数据时需要需要显示声明props. Vue.... -
props和state
2017-06-08 18:56:58区别:state和props的区别在于props是不可变的,而state可以根据与用户交互来改变,这就是为什么有些容器组件需要定义state来更新和修改数据,而子组件只能 用props来传递数据。props的用法 name属性通过 this.props....
-
Realization of absolute negative refraction index by a photonic crystal using anisotropic dielectric material
-
智能停车场云平台(附vue+SpringBoot前后端项目源码)
-
使用@Autowired注解警告Field injection is not recommended
-
jmeter修改字体
-
LN晶体的激光损伤研究
-
在 Linux 上构建企业级 DNS 域名解析服务
-
gdb调试工具
-
MySQL 管理利器 mysql-utilities
-
Linux基础入门系列课程
-
MATLAB向量化展示和函数meshgrid介绍
-
使用组合SOA和TOGAF的环境提升生产力(下)
-
JMETER 性能测试基础课程
-
read_write函数读写文件以及文件状态
-
Highly efficient cascaded P-doped Raman fiber laser pumped by Nd:YVO3 solid-state laser
-
导出数据操作
-
基于python的dango框架购物商城毕业设计毕设源代码使用教程
-
TextBox中Lines的应用实例
-
SM5202兼容TP4056高耐压充电芯片DFN封装1A线性充电芯片电子烟充电芯片
-
Jsplumb从入门到实战
-
液晶光控取向技术进展