react基础语法（五） state和props区别和使用
props的验证：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>
</head> <body>
<div id="app"> </div>
<script type="text/babel">
//props验证借助第三方库 prop-types.js
var title = "验证传过来的数据类型是否正确?";
//var title = 666;
class Title extends React.Component {
render() {
return (
<h1>得到的props验证:{this.props.title}</h1>
);
}
}
Title.propTypes = {
title: PropTypes.string //属性 title 是必须的且是字符串，非字符串类型会自动转换为字符串并且控制台警告如title = 666;
};
ReactDOM.render(
<Title title={title} />,
document.getElementById('app')
);
</script>
</body> </html>
state和props的互用：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head> <body>
<div id="app"> </div>
<!--Props验证-->
<!--React.PropTypes在 React v15.5 版本后已经移到了 prop-types 库。-->
<!--<script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>-->
<script type="text/babel">
//state和 props主要的区别在于 props是不可变的，而 state可以根据与用户交互来改变;
//子组件只能通过 props来传递数据;
//组合使用 state 和 props;
class WebSite extends React.Component {
constructor() {
super();
this.state = { //父组件中设置 state,并通过在子组件上使用 props将其传递到子组件上;
name: "react基础语法",
website: "https://www.baidu.com"
}
}
render() {
//设置 name和 website来获取父组件传递过来的数据
return (
<div>
<Name name={this.state.name} />
<Web website={this.state.website} />
</div>
);
}
}
class Name extends React.Component {
render() {
return (
<h1>{this.props.name}</h1>
);
}
}
class Web extends React.Component {
render() {
return (
<a href={this.props.website}>
{this.props.website}
</a>
);
}
}
ReactDOM.render(
<WebSite />,
document.getElementById('app')
);
</script>
</body> </html>
react基础语法（五） state和props区别和使用的更多相关文章
- react基础篇五
再看JSX 本质上来讲,JSX 只是为 React.createElement(component, props, ...children) 方法提供的语法糖.比如下面的代码: <MyButto ...
- react 基础语法复习3- 数据传递 & 数据变化(props&&state)
react当中的数据传递是通过 props以及 state来实现的 props <Header name="kugeliu" /> Header组件当中有个name属性 ...
- react基础语法（四） state学习
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- React基础语法学习
React主要有如下3个特点: 作为UI(Just the UI) 虚拟DOM(Virtual DOM):这是亮点 是React最重要的一个特性 放进内存 最小更新的视图,差异部分更新 diff算法 ...
- react基础语法二
这里只是对自己的学习进行一次总结,也是为了让自己以后如果长时间不使用快速记忆起来的笔记,如果想要学习,还是去官网看文档比较好一些.. 注意 下面的代码的 script标签的type类型都为 “text ...
- react 基础语法使用
刚开始不久react,在菜鸟上及其他前辈网站上学习,下面开始我的自学笔记. 包括: 渲染元素 组件(函数方法定义.es6 class定义) 事件处理 条件渲染 列表 下面代码部分将不会再写html部分 ...
- react基础语法（一）元素渲染和基础语法规则
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- react 基础语法复习2- react入门以及JSX
引入 react 以及 ReactDom import React from 'react'; import ReactDOM from 'react-dom'; 将react组件渲染到真实dom节点 ...
- react基础语法（三）组件的创建和复合组件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- [Selenium] The most commonly used CSSSelector
CSSSelector Example Description element.element div.dropdown Select all <div> elements whose ...
- NSArray使用须知
多用firstObject方法 在iOS7之前,我们获取NSArray的第一个元素,通常使用array[0],在iOS7中,新引入了公开的firstObject方法,对于空数组,该方法返回nil,而使 ...
- CocoaPods 安装相关问题
(1)pod install还是pod update都卡在Analyzing dependencies不动. 解决方法: 其实原因在于以上两个命令执行时会升级CocoaPods的spec仓库,加一个参 ...
- javaScript的几个问题简答
1.javascript的typeof返回哪些数据类型 Object.number. function. boolean. underfind 2.例举3种强制类型转换和2种隐式类型转换? ...
- 微信小程序在线支付功能使用总结
最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过程如出 ...
- web_html-day1
概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器 ...
- 深入研究 Java Synchronize 和 Lock 的区别与用法
在分布式开发中,锁是线程控制的重要途径.Java为此也提供了2种锁机制,synchronized和lock.做为Java爱好者,自然少不了对比一下这2种机制,也能从中学到些分布式开发需要注意的地方. ...
- 利用ASP .NET Core的静态文件原理实现远程访问Nlog日志内容及解决遇到的坑
最近项目上试运行发现,很多时候网站出了问题或者某个功能不正常,常常需要运维人员去服务器里面查看一下日志,看看日志里面会产生什么异常,这样导致每次都要去远程服务器很不方便,有时服务器是客户保管的不能让我 ...
- Android笔记---常用控件以及用法
这篇文章主要记录下Android的常用控件以及使用的方法,Android 给我们提供了大量的UI控件,合理地使用这些控件就可以非常轻松地编写出相当不错的界面,这些是Android学习的基础,没有什么业 ...
- hdoj1106
果然...这种一条字符串的处理,还是不熟练,居然wa了四次--. 预处理预处理!!!!: 然后中间对条件的确定,标记的改变+预处理,不够严谨啊!!! #include<cstdio> #i ...