精华内容
下载资源
问答
  • props

    千次阅读 2018-07-11 10:42:34
    一、props介绍组件自身的属性对象、一般用于嵌套内外层组件中、负责传递传递数据、通常是由父层组件向子层组件传递。props对象中的属性与组件中的属性一一对应、不要直接修改props中的属性的值。二、案例/* 定义一...

    一、props介绍

    1. 组件自身的属性对象、一般用于嵌套内外层组件中、负责传递传递数据、通常是由父层组件向子层组件传递。
    2. props对象中的属性与组件中的属性一一对应、不要直接修改props中的属性的值。

    二、案例

    /*
       定义一个WebShow组件,输出网址的名字和地址,网址是一个可以点击的链接
       分析:定义一个组件WebName负责网址名字的输出,定义组件WebLink输出网址地址,并且可以打开链接
    
       思路:
       1.给WebShow设置两个属性,wName、wLink
       2.WebShow的props增加了两个属性值
       3.WebName从WebShow的props对象中获取wName的值,即网址的名称。
     */
    1. 定义WebName组件,显示网站名称
       var WebName = React.createClass({
         render : function(){
           return <h1>{this.props.webname}</h1>
         }
       });
      注意:this.props.webname是接收父组件的传值。
    2. 定义WebLink组件,显示网站网址
      var WebLink = React.createClass({
        render : function(){
          return <a href={this.props.weblink}>{this.props.weblink}</a>
        }
      });
      注意:this.props.weblink是接收父组件的传值。
    3. 定义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接收上级的传值,并且在这里将接收的值也传递给了子组件。
    4. 渲染界面
       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')
    );

     

     

    展开全文
  • 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),非常具有实用价值,需要的朋友可以参考下
  • 今天小编就为大家分享一篇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

    展开全文
  • react设置默认propsprops数据类型

    千次阅读 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 传递数据组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 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里面的数据(双大括号)。 子组件不能直接在模板里面渲染父元素的数据。 如果子组件想要引用父元素的...
  • 我们可以认为向组件传递属性就像向函数传递参数,就像我们可以访问传入普通 JavaScript 函数的参数,我们也可以使用 this.props (或者在无状态函数式组件中使用props)访问组件的属性,所有属性都存储在这个对象上...
  • 组件 & Props

    2021-01-17 21:15:23
    Props 组件:类似于Javascript函数。它接受任意的入参(即"Props"),并返回用于描述页面展示内容的React元素 函数组件与class组件 1. 函数组件: 接收唯一带有数据的 “props”(代表属性)对象与并返回一个 ...
  • props数据验证

    2020-08-24 22:28:04
    如果需要在子组件接收父组件数据时,对数据进行一些验证,需要用到props验证。在子组件接收父组件传递的数据,要用对象的方式,在对象中可以设置相应的验证规则。 1.数据类型验证 写法一: props:{ '参数名':数据...
  • react中父子组件传值以及调用方法props传值以及传递方法 父组件传值给子组件: 如果我需要把contatcFrom里面的值传给子组件,可以这样做: <Contact contatcForm={this.state.contatcForm} /> 子组件...
  • props的使用

    2019-12-04 23:47:57
    props:[‘acceptData1’,‘acceptData2’],与data、methods同级 有默认值 props:{ title:{  default:‘默认值’ } } 规定类型 props:{ title:{  type:String } } 规定类型且有默认值 props:{ title:{  type:...
  • 可以使用 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 的使用有两种写法:// 字符串数组写法const subComponent = {props: ['name']}// 对象写法const subComponent = {props: {name: {type: String,default: 'Kobe Bryant'}}}Vue在内部会对 props ...
  • 前天我的同事问了我一个问题,说她遇到一个父子组件之间的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 &lt;h1&...
  • 开发过程中,props 的使用有两种写法:// 字符串数组写法const subComponent = {props: ['name']}// 对象写法const subComponent = {props: {name: {type: String,default: 'Kobe Bryant'}}}Vue在内部会对 props ...
  • 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属性,就是用来验证组件实例的...
  • 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....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 50,257
精华内容 20,102
关键字:

props