浅谈React的props验证、默认值、传递

喜欢ヅ旅行 2022-06-17 12:30 235阅读 0赞

1、用 React.PropTypes.element可以指定某props属性必须是一个React元素。

正确示范1：

var MyBox = React.createClass({
    	propTypes: {
    		children: React.PropTypes.element.isRequired
    	},
    	render: function() {
    		return (
    			<div>
    				{this.props.children} 
    			</div>
    		);
    	}
    });
    ReactDOM.render(
    	<MyBox>
    		<span>Hello, react!</span>
    	</MyBox>,
    	document.getElementById('timeBox')
    );

正确示范2：

var MyBox = React.createClass({  
        propTypes: {  
            children: React.PropTypes.element.isRequired  
        },  
        render: function() {  
            return (  
                <div>  
                    {this.props.children}   
                </div>  
            );  
        }  
    });  
    ReactDOM.render(  
        <MyBox>  
    		<div>
    			<span>Hello</span>  
    			<span> react!</span>  
    		</div>
        </MyBox>,  
        document.getElementById('timeBox')  
    );

错误示范1：

var MyBox = React.createClass({
    	propTypes: {
    		children: React.PropTypes.element.isRequired
    	},
    	render: function() {
    		return (
    			<div>
    				{this.props.children} 
    			</div>
    		);
    	}
    });
    ReactDOM.render(
    	<MyBox>
    		Hello, react!
    	</MyBox>,
    	document.getElementById('timeBox')
    );

错误示范2：

var MyBox = React.createClass({  
        propTypes: {  
            children: React.PropTypes.element.isRequired  
        },  
        render: function() {  
            return (  
                <div>  
                    {this.props.children}   
                </div>  
            );  
        }  
    });  
    ReactDOM.render(  
        <MyBox>  
    	<span>Hello</span>  
    	<span> react!</span>  
        </MyBox>,  
        document.getElementById('timeBox')  
    );

更多关于React类型验证PropsType的介绍请见：[http://blog.csdn.net/zhouziyu2011/article/details/70842310][http_blog.csdn.net_zhouziyu2011_article_details_70842310]

2、React 支持以声明式的方式来定义 props 的默认值

var MyBox = React.createClass({
    	getDefaultProps: function() {
    		return {
    			id: 'text'
    		};
    	},
    	render: function() {
    		return (
    			<input id={this.props.id} type="text"/> 
    		);
    	}
    });
    ReactDOM.render(
    	<MyBox />,
    	document.getElementById('timeBox')
    );

3、常用的React组件只是对HTML做简单扩展，可以复制任何传进组件的HTML属性到底层的HTML元素上。

var MyLink = React.createClass({
    	render: function() {
    		return <a {...this.props}>{this.props.children}</a>;
    	}
    });
    ReactDOM.render(
    	<MyLink href="https://www.baidu.com">
    		Click here!
    	</MyLink>,
    	document.getElementById('timeBox')
    );

更多关于JSX的新语法——展开属性（...操作符）的介绍请见：[http://blog.csdn.net/zhouziyu2011/article/details/70807803][http_blog.csdn.net_zhouziyu2011_article_details_70807803]

[http_blog.csdn.net_zhouziyu2011_article_details_70842310]: http://blog.csdn.net/zhouziyu2011/article/details/70842310
[http_blog.csdn.net_zhouziyu2011_article_details_70807803]: http://blog.csdn.net/zhouziyu2011/article/details/70807803

发表评论取消回复

表情：

评论列表（有 0 条评论，235人围观）

还没有评论，来说两句吧...

相关阅读

相关 React使用prop-types校验传递的值类型

子组件里需要传递的值是数组才可以，但是接收到了string类型，肯定就会报错： ![f23ca319775440d498c73f0d36532127.png][] 这时候报

柔情只为你懂/ 2023年10月04日 17:27/ 0 赞/ 12 阅读

相关 react—props验证及默认值

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

今天药忘吃喽~/ 2022年11月21日 09:47/ 0 赞/ 145 阅读

相关 React的Props默认值

React的Props默认值简单来说props默认值使用场景比较少，但是也必须取了解首先父级组件我们可以很明显的看到父级组件没有传入`pageS

喜欢ヅ旅行/ 2022年09月06日 01:25/ 0 赞/ 195 阅读

相关浅谈Javascript中默认参数值的设置

第一种： 1: function test(a,b){ 2: var a = arguments[0] ? arguments[0] : 1;//设置

叁歲伎倆/ 2022年08月12日 01:06/ 0 赞/ 196 阅读

相关浅谈React mixins

组件是React复用代码的最佳方式，但有时一些不同的组件间也需要共用一些功能，被称为跨切面关注点，React使用 mixins 来解决这类问题。一个通用的场景是：一个组件

港控/mmm°/ 2022年06月17日 13:44/ 0 赞/ 245 阅读

相关浅谈React的createFactory()方法

1、作用：创建React组件实例。 2、实现：只需创建一个带type参数的createElement的绑定函数即可。 React.createFa

水深无声/ 2022年06月17日 12:36/ 0 赞/ 288 阅读

相关浅谈React的props验证、默认值、传递

1、用 React.PropTypes.element可以指定某props属性必须是一个React元素。正确示范1： var MyBox = React.crea

喜欢ヅ旅行/ 2022年06月17日 12:30/ 0 赞/ 236 阅读

相关浅谈React的props和state

在React里有两种数据模型：props和state。 1、state 1) state的作用： React 把用户界面当作状态机，根据状态变化渲染用户界面，可以让用户界

r囧r小猫/ 2022年06月17日 11:54/ 0 赞/ 232 阅读

相关浅谈React Hooks

> 由于工作的原因我已经很长时间没接触过React了。前段时间圈子里都在讨论React Hooks，出于好奇也学习了一番，特此整理以加深理解。缘由在web应用无所不

古城微笑少年丶/ 2022年03月06日 05:18/ 0 赞/ 317 阅读

相关浅谈jquery中prop()和attr()

我们都知道，一般在jquery中设置属性时要用到`attr()`方法，现在我们有一个效果，点击按钮切换复选框的选中状态，下面贴出`html`代码： <input ty

小鱼儿/ 2021年06月26日 16:06/ 0 赞/ 502 阅读