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> ...
随机推荐
- Oracle备份与恢复：冷备份恢复
模拟数据库数据文件丢失的情况下,通过丢失之前的数据文件物理备份做恢复: 说明:数据文件丢失前一刻的所有归档日志都存在. 环境:oracle10g +rhel5 1.关闭数据库,copy system0 ...
- 两种 NIO 实现：Selector 与 Epoll
[总结]两种 NIO 实现:Selector 与 Epoll 时间2012-11-17 08:38:42 开源中国新闻原文 http://my.oschina.net/ielts0909/blog/ ...
- HihoCoder1705: 座位问题（STL）
描述 HIHO银行等待区有一排N个座位,从左到右依次编号1~N.现在有M位顾客坐在座位上,其中第i位坐在编号Ai的座位上. 之后又陆续来了K位顾客,(K + M ≤ N) 他们都会选择坐在最" ...
- Struts2的各种标签库
1 在JSP中使用taglib编译指令导入标签库 <%@ taglib prefix="s" uri="/struts-tags" %> ----- ...
- 【NOIP 2003】 加分二叉树
[题目链接] 点击打开链接 [算法] 树形DP即可 [代码] #include<bits/stdc++.h> using namespace std; #define MAXN 50 in ...
- 聊聊Spring的核心组件
Spring的核心是IOC容器,它本质上是一个bean关系集合.而要实现它也是有beans,context,core三个模块完成的. beans包主要是负责bean的定义,创建和解析工作,里面用到了简 ...
- LINUX-进程的概念
计算机中,CPU是最宝贵的资源,为了提高CPU的利用率,引入了多道程序设计的概念.当内存中多个程序存在时,如果不对人们熟悉的“程序”的概念加以扩充,就无法刻画多个程序共同运行时系统呈现出的特征. 一. ...
- Table View Programming Guide for iOS---(四)---Navigating a Data Hierarchy with Table Views
Navigating a Data Hierarchy with Table Views 导航数据表视图层次 A common use of table views—and one to which ...
- SDUT2161:Simple Game（NIM博弈+巴什博弈）
传送门 题意 n堆石子,每次可以取一堆至三堆任意非零石子数,取完者赢,问最后谁能赢 分析 以前我们做过NIM博弈是对一堆进行操作,现在换成了三堆,其实对于n堆都一样一堆的情况 如果最后二进制每位数的1 ...
- bzoj 2023: [Usaco2005 Nov]Ant Counting 数蚂蚁【生成函数||dp】
用生成函数套路推一推,推完老想NTT--实际上把这个多项式乘法看成dp然后前缀和优化一下即可 #include<iostream> #include<cstdio> using ...