react设置默认props

一般设置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 定义默认值：

react设置默认props相关推荐

React + TypeScript 默认 Props 的处理
React 中的默认 Props 通过组件的 defaultProps 属性可为其 Props 指定默认值. 以下示例来自 React 官方文档 - Default Prop Values: clas ...
react设置props的默认值
一般设置props的默认值有两种方式指定 props 的默认值, 这个方法只有浏览器编译以后才会生效 class HandsomeBoy extends Component{// 设置默认值//de ...
[react] 如何给非控组件设置默认的值？
[react] 如何给非控组件设置默认的值? 表单元素依赖于状态(state),表单元素需要默认值实时映射到状态的时候,就是受控组件 <input name="username&quo ...
react 父子组件传值校验设置默认值
父子组件传值校验 & 设置默认值 import PropTypes from 'prop-types' 在class 类外面: 1-传值校验子组件名.propTypes= {avname= ...
[react] 为什么说React中的props是只读的？
[react] 为什么说React中的props是只读的? React 组件都必须像纯函数一样保护它们的 props 不被更改. 将react组件理解成纯函数,数据流驱动,参数传入不允许做更改扩展 ...
React (三) 修改props，React父传子、子传父、this绑定
Props介绍与应用什么是 props 如何使用父传子函数组件类组件默认值子传父修改 props 事件监听 this 绑定直接在 jsx 元素上进行绑定(不推荐) 箭头函数(推荐) 直 ...
彻底理解react中的props
每天对自己多问几个为什么,总是有着想象不到的收获. 一个菜鸟小白的成长之路(copyer) 在react中 state 和 props是两个非常重要的属性,并且常用的属性.简单来说:都是用来保存数据 ...
antd radio设置默认选中_antd中如何给绑定Form的Radio.Group设置默认的选中值！
嗯~~ 本人2年前端小菜鸡,刚刚换了新公司,接手的项目使用的是react+antd+dva+umi等技术. 之前完全没有antd的经验,但是有2年react的经验,所以嘛,项目上手难度一般,但是扛不住 ...
bootstrap树节点如何设置默认不展开_我开源了一个基于Vue的组织架构树组件
开门见山 Demo 演示地址:http://www.longstudy.club/vue... github 地址:https://github.com/qq44924588... 项目背景因为最近 ...

react设置默认props

第一种方式：

第二种方式：

react设置默认props相关推荐

最新文章

热门文章