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> ...
随机推荐
- ${varname:-defaultvalue}
${varname:-defaultvalue}的意思是:如果varname存在且非null,则返回其值:否则,返回defaultvalue. 用途:如果变量未定义,则返回默认值.
- codeforces 673D D. Bear and Two Paths(构造)
题目链接: D. Bear and Two Paths time limit per test 2 seconds memory limit per test 256 megabytes input ...
- 【扬中集训DAY2T2】 机智的AmyZhi
[题目链接] 点击打开链接 [算法] 据说标算是暴力? 从N-200开始搜 不过我用了搜索+一些奇怪的剪枝,也A了.... [代码] 标程 #include<bits/stdc++.h> ...
- Java中的Cloneable接口与深拷贝、浅拷贝
Cloneable接口是一个标记接口,也就是没有任何内容,定义如下: 这里分析一下这个接口的用法,clone方法是在Object种定义的,而且是protected型的,只有实现了这个接口,才可以在该类 ...
- Mac 下的截图技巧
最近想制作GIF图片,截图后,发现没有截出鼠标小效果,自己就查阅了一下资料,总结了不少的截图技巧,这里写下来,权当笔记,方便今后检索,方便别人共享. 方法一: 下载 QQ,在QQ的皮娜好设置里面设置截 ...
- LXD安装
#安装 #初始化(一路next) sudo lxd init #启动容器 lxc launch ubuntu:16.04 first #进到容器内 lxc exec first -- /bin/bas ...
- 斯坦福CS231n—深度学习与计算机视觉----学习笔记 课时7
课时7 线性分类器损失函数与最优化(下) 我们为什么要最大化对数概率而非直接最大化概率? 你在做逻辑斯蒂回归时,如果你只是想要最大化概率,那你使用log是无意义的.因为log函数是单调函数,最大化概率 ...
- bash 脚本编程七 将命令输出保存到变量中（转载）
转自:http://blog.csdn.net/csfreebird/article/details/7978699 `符号包含的命令执行完后,可以讲其输出结果保存到变量中 #!/bin/bash v ...
- 阿里云服务器及部署mysql
可通过百度获取内容不再赘述. 远程连接: 远程连接阿里云服务器需在服务器上开放443端口,方法自行百度 win10通过系统自带远程连接服务连接时需安装凭据: http://blog.csdn.ne ...
- 「开源」目前见过的最好的开源OA产品
这是我目前见过的最好的开源OA产品.功能完整,代码结构清晰.值得推荐. 1.项目介绍 oasys是一个OA办公自动化系统,使用Maven进行项目管理,基于springboot框架开发的项目,mysql ...