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组件，显示网站名称 var WebName = React.createClass({
   render : function(){
     return <h1>{this.props.webname}</h1>
   }
 });
注意：this.props.webname是接收父组件的传值。
定义WebLink组件，显示网站网址var WebLink = React.createClass({
  render : function(){
    return <a href={this.props.weblink}>{this.props.weblink}</a>
  }
});
注意：this.props.weblink是接收父组件的传值。
定义WebShow组合组件var WebShow = React.createClass({
  render : function(){
    return (
      <div>
        <WebName webname = {this.props.wname}/>
        <WebLink weblink = {this.props.wlink}/>
      </div>
    )
  }
});
注意：this.props.wname和this.props.wlink接收上级的传值，并且在这里将接收的值也传递给了子组件。
渲染界面 ReactDOM.render(
   <WebShow wname = "百度科技" wlink = "http://www.baidu.com"/>,
   document.getElementById("container")
 );
注意：wname和wlink分别给WebShow组件传值。
三、案例代码
<!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')
);

收起

展开全文

react State

props详解

千次阅读 2019-02-23 17:31:41

文章目录propsthis.props.childrenstatic propTypesstatic defaultProps ReactNative系列-文章 props props是react组件的属性，一经指定，在被指定的组件的生命周期中则不再改变。在react组件中，所有的参数都放在...


文章目录
props详解
props
this.props.children
static propTypes
static defaultProps


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:09

props: { // 基础的类型检查 (`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

收起

展开全文

vue vue.js

react设置默认props及props数据类型
千次阅读 2019-07-09 20:58:33
在react中父组件往子组件传值通过props属性，为了确保子组件不因props错误导致出错，因此需要对props进行一些初始化设置。使用prop-types设置props类型实例代码： import React, {Component} from 'react'; import...
收起
react
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:09
opencv300.props,在VS2013下配置OpenCV3.0 必备
收起
props验证
2019-06-18 21:57:26
props:{ 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:23
Props 组件：类似于Javascript函数。它接受任意的入参（即"Props"），并返回用于描述页面展示内容的React元素函数组件与class组件 1. 函数组件：接收唯一带有数据的 “props”（代表属性）对象与并返回一个 ...
收起
react javascript
props数据验证
2020-08-24 22:28:04
如果需要在子组件接收父组件数据时，对数据进行一些验证，需要用到props验证。在子组件接收父组件传递的数据，要用对象的方式，在对象中可以设置相应的验证规则。 1.数据类型验证写法一： props:{ '参数名':数据...
收起
vue
react中props属性传值以及props传递函数
2020-11-22 17:18:08
react中父子组件传值以及调用方法props传值以及传递方法父组件传值给子组件：如果我需要把contatcFrom里面的值传给子组件，可以这样做： <Contact contatcForm={this.state.contatcForm} /> 子组件...
收起
react
props的使用
2019-12-04 23:47:57
props:[‘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:44
react之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:02
props是父组件往子组件传东西不改变的值使用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:51
vue中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属性，就是用来验证组件实例的...
收起
react
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....
收起

props

一、props介绍

二、案例

三、案例代码

四、案例展示

React Props

一、React Props

二、使用Props

三、默认Props

四、State和Props

五、Props验证

props详解

文章目录

props详解

props

this.props.children

static propTypes

static defaultProps

React教程之Props验证的具体用法（Props Validation）

vue里面v-bind和Props 利用props绑定动态数据的方法

props类型

react设置默认props及props数据类型

vue props

props写法_深入理解vue中Props属性

opencv300.props

props验证

关于Vue中props的详解

props传递对象_React 使用 Props 传递数据

组件 & Props

props数据验证

react中props属性传值以及props传递函数

props的使用

55Vue - Props（使用Props传递数据）

react之props

props的写法

props写法_Vue内部怎样处理props选项的多种写法

vue子组件赋值props_vue 父子传值props赋值失效问题

React的props

props写法_详解Vue内部怎样处理props选项的多种写法

vue打印props的值_vue中props传值方法

props的介绍

React props

vue2.0 props

props和state

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从入门到实战

液晶光控取向技术进展