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> ...
随机推荐
- nginx网站日志配置
用yum安装的nginx的日志默认安装在路径:/var/log/nginx nginx配置文件:/etc/nginx/nginx.conf (总配置文件)/etc/nginx/conf.d/defau ...
- BM算法模式匹配——字符串与KMP比较
下面是代码:BM是什么参考阮一峰老师的讲解 点击打开链接 #include<iostream> #include<algorithm> #include<string. ...
- Android Studio四大组件之Service
Service在Android运行在后台,它没有可视化界面,只是默默运行在后台.我们以一个后台定时器的例子清晰的说明Service的运行流程. 一.创建Service类 项目右键->New-&g ...
- 单片机知识是Linux驱动开发的基础之一
这是arm裸机1期加强版第1课第2节课程的wiki文字版. 为什么没前途也要学习单片机? 因为它是个很好的入口. 学习单片机可以让我们抛开复杂的软件结构,先掌握硬件操作,如:看原理图.芯片手册.写程序 ...
- CodeForces - 55D && UVALive - 6528
A. 问L到R有多少能被自己各个数位上的非零数字整除的数字. 关键在于dp的状态:注意到这里有三个关键属性:当前数位,2~9出现的情况(0,1不用管), 原数字取余2520的结果(2~9的最小公倍数) ...
- Collection View Programming Guide for iOS---(七)---Custom Layouts: A Worked Example
Custom Layouts: A Worked Example Creating a custom collection view layout is simple with straightfor ...
- Collection View Programming Guide for iOS---(六)---Creating Custom Layouts
Creating Custom Layouts 创建自定义布局 Before you start building custom layouts, consider whether doing so ...
- Jquery之each函数详解
最近项目被each函数坑惨了,想来还是好好整理下关于each函数的方方面面,一来方便自己查阅,二来为读者提供经验和教训,废话不多说,来看看Each函数到底是怎么坑人的. 一. 全局jQuery.eac ...
- 斯坦福CS231n—深度学习与计算机视觉----学习笔记 课时5
课时5 数据驱动的图像分类方式:K最邻近与线性分类器(下) 在参数化方法中,我们要做的是构造一个函数,输入一张图片,对每一类输出一个数值.对任意一张图片,我们会计算出它到底属于哪一类.这些参数有时候也 ...
- Spring-SpringMVC父子容器&AOP使用总结
此文已由作者尧飘然授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. Spring&SpringMVC Spring&SpringMVC作为bean管理容器和MV ...