props react 继续_react super(props)与vue props - CSDN
  • react设置默认props

    万次阅读 2019-05-07 20:46:27
    一般设置props的默认值有两种方式,下面通过一个例子说明一下。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title...

    一般设置props的默认值有两种方式,下面通过一个例子说明一下。

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>React表单</title>
        <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    	<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    	<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
      </head>
      <body>
        <div id="example"></div>
        <script type="text/babel">
    
                class Greeting extends React.Component {
                
    //方法一: 指定 props 的默认值, 这个方法只有浏览器编译以后 才会生效
    
                    static defaultProps = { 
                        age: 18
                    }
                    
                    render() {
                        return (
                        <h1>Hello, {this.props.name}. and  my age is {this.props.age}</h1>
                        );
                    }
                }
                
    // 方法二: 指定 props 的默认值,这个方法会一直生效
     
                Greeting.defaultProps = {    
                    name: '我是props的默认值!'
                };
    
                ReactDOM.render(
                    <Greeting />,
                    document.getElementById('example')
                );
        </script>
      </body>
    </html>
    
    

    第一种方式:

    React 组件类中声明 defaultProps 作为静态属性。

    第二种方式:

    通过赋值特定的 defaultProps 属性为 props 定义默认值:

    展开全文
  • reactprops的使用

    千次阅读 2019-03-27 21:26:03
    在开发过程中,经常会遇到父组件和子组件之间相互通信,React子组件和父组件通信包括以下几个方面: 1,子组件调用父组件的方法 (1)子组件要拿到父组件的属性,需要通过 this.props 方法。 (2)同样地,如果子...

    在开发过程中,经常会遇到父组件和子组件之间相互通信,React子组件和父组件通信包括以下几个方面:

    1,子组件调用父组件的方法
    (1)子组件要拿到父组件的属性,需要通过 this.props 方法。
    (2)同样地,如果子组件想要调用父组件的方法,只需父组件把要被调用的方法以属性的方式放在子组件上,
    子组件内部便可以通过“this.props.被调用的方法”这样的方式来获取父组件传过来的方法。

    2,父组件调用子组件的方法
    在 ReactJS 中有个叫 ref 的属性。这个属性就像给组件起个引用名字一样,子组件被设置为 ref 之后(比如 ref=“xxx”)。父组件便可以通过 this.refs.xxx 来获取到子组件了。

    子组件向父组件传值

    • 子组件通过this.props.fun 使用父组件的方法
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>React 实例</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    </head>
    <body>
    <div id="example"></div>
    
    <script type="text/babel">
    
    
    class Child extends React.Component {
    
        render() {
            return (
                <div>
                请输入邮箱:<input onChange={this.props.handleEmail}/>
                </div>
            );
        }
    }
    
     
    
    class Parent extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                email: ' '
            }
        }
    
        handleEmail = (event) => {
            this.setState({
                email: event.target.value
            });
        }
    
        render() {
            return (
                <div>
                <div>用户邮箱:{this.state.email}</div>
                <Child name="email" handleEmail={this.handleEmail}/>
                </div>
            );
        }
    }
    ReactDOM.render(
        <Parent />,
        document.getElementById('example')
    );
    
    
    </script>
    
    </body>
    </html>
    

    子组件部分处理

    • 有时候往往需要对数据做处理,再传给父组件,比如过滤或者自动补全等等,下面的例子对用户输入的邮箱做简单验证,自动过滤非数字、字母和"@."以外的字符。
      效果图
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>React 实例</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    </head>
    <body>
    <div id="example"></div>
    
    <script type="text/babel">
    class Child extends React.Component {
    
        handleVal = () => { 
            var val = this.refs.emailDom.value;
            val = val.replace(/[^0-9|a-z|\@|\.]/ig,"");
            this.props.handleEmail(val);
        }
    
        render() {
            return (
                <div>
                请输入邮箱:<input ref="emailDom" onChange={this.handleVal}/>
                </div>
            );
        }
    }
    
    // 父类 - Parent
    class Parent extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                email: 'ddd'
            }
        }
    
        handleEmail = (value) => {
            this.setState({
                email: value
            });
        }
    
        render() {
            return (
                <div>
                    <div>用户邮箱:{this.state.email}</div>
                    <Child name="email" handleEmail={this.handleEmail}/>
                </div>
            );
        }
    }
    
    ReactDOM.render(
        <Parent />,
        document.getElementById('example')
    );
    
    </script>
    
    </body>
    </html>
    

    多级的传递

    • 如果还存在孙子组件的情况呢?如下图,黑框为父,绿框为子,红框为孙,要求子孙的数据都传给爷爷。原理一样的,只是父要将爷爷对孙子的处理函数直接传下去。
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>React 实例</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    </head>
    <body>
    <div id="example"></div>
    
    <script type="text/babel">
    
    class Grandson extends React.Component {
      render() {
        return (
          <div>性别:
            <select onChange={this.props.handleSelect}>
              <option value="男"></option>
              <option value="女"></option>
            </select>
          </div>
        );
      }
    }
    
    class Child extends React.Component {
    
      render() {
        return (
          <div>
            姓名:<input onChange={this.props.handleVal}/>
            <Grandson handleSelect={this.props.handleSelect}/>
          </div>
        );
      }
    }
    
    class Parent extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          username: '',
          sex: ''
        }
      }
    
      handleVal = (event) => {
        this.setState({
          username: event.target.value
        });
      }
    
      handleSelect = (event) => {
        this.setState({
          sex: event.target.value
        });
      }
    
      render() {
    
        return (
          <div>
            <div>用户姓名:{this.state.username}</div>
            <div>用户性别:{this.state.sex}</div>
            <Child handleVal={this.handleVal} handleSelect={this.handleSelect}/>
          </div>
        );
      }
    }
    
    ReactDOM.render(
        <Parent />,
        document.getElementById('example')
    );
    
    
    </script>
    
    </body>
    </html>
    

    父类调用子类的函数和属性

    • 通过refs获取
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>React 实例</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    </head>
    <body>
    <div id="example"></div>
    
    <script type="text/babel">
    class ButtonComment extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          count: 0
        }
      }
    
      sendSword = () => {
        var newCount = this.state.count + 1;
        this.setState({
          count: this.state.count + 1
        });
        this.props.getSwordCount();
      }
    
      render() {
        return (
          <button onClick={this.sendSword}>{this.props.buttonName}</button>
        );
      }
    }
    // 父类
    class ImDaddyComponent extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          sendCount: 0
        }
    
    
    
      }
    
    
      getSwordCount = () => {
        this.setState({sendCount:this.refs.getSwordButton.state.count + 1});
      }
    
      sendSword = () => {
        console.log(this.refs);
    
        this.refs.getSwordButton.sendSword();
      }
    
      render() {
     
        return (
          <div>
            <ButtonComment ref="getSwordButton" getSwordCount={this.getSwordCount} buttonName="儿子送宝刀"/>
            <button onClick={this.sendSword}>通过老爸送宝刀</button>
            <p>
              父子俩共送{this.state.sendCount}把宝刀!!!
            </p>
          </div>
        );
      }
    }
    
    
    ReactDOM.render(
        <ImDaddyComponent />,
        document.getElementById('example')
    );
     
    </script>
    
    </body>
    </html>
    

    参考

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

    千次阅读 2019-07-10 15:34:41
    react中父组件往子组件传值通过props属性,为了确保子组件不因props错误导致出错,因此需要对props进行一些初始化设置。 使用prop-types设置props类型 实例代码: import React, {Component} from 'react'; import...

    在react中父组件往子组件传值通过props属性,为了确保子组件不因props错误导致出错,因此需要对props进行一些初始化设置。

    使用prop-types设置props类型

    实例代码:

    import React, {Component} from 'react';
    import PropTypes from 'prop-types';
    
    const defaultProps = {
    	name: '',
    	age: 0,
    	sex: '未知',
    	list: []
    };
    
    class Test extends Component {
    	// ...
    }
    
    Test.defaultProps = defaultProps;	// 设置默认props
    // 设置props参数类型
    Test.propTypes = {
    	name: PropTypes.string,
    	age: PropTypes.number,
    	sex: PropTypes.string,
    	list: PropTypes.array
    };
    
    export default Test;
    

    prop-types可以检测的数据类型

    	// 设置简单数据类型
    	optionalArray: PropTypes.array,
    	optionalBool: PropTypes.bool,
    	optionalFunc: PropTypes.func,
    	optionalNumber: PropTypes.number,
    	optionalString: PropTypes.string,
    	optionalSymbol: PropTypes.symbol,
    	
    	// 设置枚举类型:你可以把属性限制在某些特定值之内
        optionalEnum: PropTypes.oneOf(['News', 'Photos']),	
    	// 设置多个类型:你也可以把属性类型限制在某些指定的类型范围内
        optionalUnion: PropTypes.oneOfType([
            PropTypes.string,
            PropTypes.number,
            PropTypes.instanceOf(Message)
        ]),
    
    	// 设置数组元素类型
    	numLists: PropTypes.arrayOf(PropTypes.number),
    	
    	// 设置对象
    	optionalObjectOf: PropTypes.objectOf(PropTypes.number), //指定为某一类型
    	optionalObjectWithShape: PropTypes.shape({				// 指定对象属性为不同的类型
            optionalProperty: PropTypes.string,
            requiredProperty: PropTypes.number.isRequired
        }),
        
    	// 设置对象数组
    	arrList: PropTypes.arrayOf(PropTypes.shape({    // 对象数组
            name: PropTypes.string,
            age: PropTypes.number.isRequired            // 必须存在的数据
        })),
        
    	// 设置是否为某个对象的实例
    	optionalMessage: PropTypes.instanceOf(Message),
    
    展开全文
  • 此答案只是一个浅显的答案,...当 React 元素为用户自定义组件时,它会将 JSX 所接收的属性(attributes)转换为单个对象传递给组件,这个对象被称之为 “props”。 代码示例: const element = <Welcome name="...

    此答案只是一个浅显的答案,来源于react官网:https://react.docschina.org/docs/components-and-props.html
    当 React 元素为用户自定义组件时,它会将 JSX 所接收的属性(attributes)转换为单个对象传递给组件,这个对象被称之为 “props”。
    代码示例:

    const element = <Welcome name="Sara" />;
    
    function Welcome(props) {
      return <h1>Hello, {props.name}</h1>;
    }
    
    const element = <Welcome name="Sara" />;
    ReactDOM.render(
      element,
      document.getElementById('root')
    );
    

    在此还请大佬,给予更多的指导。非常感谢。

    展开全文
  • React中的属性this.props

    千次阅读 2019-06-21 00:44:45
    一、什么是属性 React官方文档上对于属性的...React中的每一个组件,都包含有一个属性(props),属性主要是从父组件传递给子组件的,在组件内部,我们可以通过this.props获取属性对象 二、属性的使用方法 reac...
  • React关于 this.props.children 总结props props react是单向数据流,props是我们从上个组件传值传下来的集合,每一个props都应该对应的是从上个组件传过来的值。但是这里有一个例外,那就是this.props.children,...
  • React中的props

    2016-12-22 11:42:51
    <!DOCTYPE html> <title></title> <!--react.js是React的核心库--> <script src="./build/react.js" charset="utf-8"> <!--react-dom.js的作用是提供与DOM相
  • react中监听props的改变

    千次阅读 2020-04-24 11:01:08
    react中监听props改变componentWillReveicePropsUNSAFE_componentWillReceivePropsgetDerivedStateFromProps componentWillReveiceProps 之前使用componentWillReveiceProps来实现组件更新阶段的通信 class xxx ...
  • React 的函数组件和类组件中的props

    千次阅读 2018-05-15 09:51:01
    React 的函数组件和类组件中的props 函数组件 函数组件中的props是一个对象直接作为函数的参数传入,在组件内容中可以直接用点语法使用props对象中的属性,代码如下: function Test1(props) { return( &lt;...
  •   在做基于React项目的时候,我们通常会将一个页面分割成多个可重用的组件以提高系统的可维护性,这其中常常出现子组件之间有通信的情况。举一个下订单例子: 地址选择框展开样式如下:   这里简化处理:有一...
  • 本节将开启React框架进阶学习第二篇 如果还没有学习 1-1 ~ 1-6 React框架基础的话,建议点我开始React框架基础学习 文章系列(React框架进阶) 2-1、React框架组件化state的使用 大家好,我是Counterrr 不忘初心,...
  • react 子组件监听props 变化

    万次阅读 2019-06-13 03:18:21
    为什么80%的码农都做不了架构师?>>> ...
  • React中组件的属性传递机制,由父组件传递给子组件,不能跨级传递。当有多个组件嵌套时,从最外层的祖先组件的props开始,依次向其后代组件传递props
  • React基础语法 state和props初始化方式

    万次阅读 2017-03-29 09:22:06
    React基础语法 1.什么是React 2.React组件 3 State和Props 4 React组件生命周期 1、React React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)...
  • react中父组件在向子组件传值时,如果父组件的值...react生命周期中,可以在子组件的render函数执行前获取新的props,从而更新子组件自己的state。 例子: 父组件向子组件传值,子组件接收父组件参赛: import ...
  • Reactprops属性

    千次阅读 2016-09-08 12:33:05
    React 里有一个非常常用的模式就是对组件做一层抽象。组件对外公开一个简单的属性(Props)来实现功能,但内部细节可能有非常复杂的实现。可以使用 JSX 展开属性 来合并现有的 props 和其它值:return ;如果不使用...
  • React + TypeScript 默认 Props 的处理

    千次阅读 2019-10-12 09:45:51
    React 中的默认 Props 通过组件的defaultProps属性可为其Props指定默认值。 以下示例来自React 官方文档 - Default Prop Values: class Greeting extends React.Component { render() { return ( <h1>...
  • React传递props

    千次阅读 2016-03-21 09:52:09
    1、React里有一个非常常用的模型就是对组件做一层抽象。组件对外公开一个简单的属性(Props)来实现功能,但内部细节坑内有分厂复杂的实现。可以使用JSX展开属性来合并现有的props和其他值: return ;  如果不使用...
  • import React from 'react'; import styles from '../../styles/views/Service.less'; class ServiceConfiguration extends React.Component { constructor(props) { super(props); this.state = { value: '',...
  • React组件的默认props

    2019-06-10 19:28:53
    给类组件添加默认的props,如果在调用该组件时没有传递props,则使用props时会用默认值class Person extends Component { render () { const { name, age, child } = this.props; console.log(name, age, child);...
1 2 3 4 5 ... 20
收藏数 47,822
精华内容 19,128
关键字:

props react 继续