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> ...
随机推荐
- 通过Toad工具查看dmp里面的表
今天有同事要查看dmp里面的表是否有数据,虽然可以把单表数据通过exp导出查看,但还是稍显有点麻烦,要花时间. 无意中发现toad工具可以直接查看dmp里面的表数据. 第一步:Database--&g ...
- linux oracle命令行窗口命令上下翻阅
1.上传rlwrap-0.37.tar.gz到/stage cd /stage/ 解压tar xzvf rlwrap-0.37.tar.gz cd rlwrap-0.37 ./configure ...
- UVA-11462 (计数排序)
题意: 2e6个数,按从小到大的顺序输出; 思路: 计数排序; AC代码: #include <bits/stdc++.h> /* #include <vector> #inc ...
- macbook pro 下eclipse配置svn插件
eclipse中最常使用的SVN插件是subclipse,先到subclipse官网:http://subclipse.tigris.org下载该插件. 如上图,点击“Download and I ...
- Vue之组件的内容分发
aaarticlea/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUF ...
- [laravel]请求处理
请求进入 public/index.php 文件. bootstrap/start.php 文件创建应用程序对象并检测环境. 内部的 framework/start.php 文件配置相关设置并加载服务 ...
- 【旧文章搬运】遍历EPROCESS中的ActiveProcessLinks枚举进程
原文发表于百度空间,2008-7-25========================================================================== 前面对PEB ...
- 未能加载文件或程序集“Microsoft.ReportViewer.WebForms, Version=9.0.0.0, Culture=neutral, PublicKeyT
VS2008开发的网站,本地测试没问题,上传到服务器就出错,提示: 引用内容未能加载文件或程序集“Microsoft.ReportViewer.WebForms, Version=9.0.0.0, C ...
- 038--HTML
一.HTML的定义 1. 超文本标记语言(Hypertext Markup Language,HTML)通过标签语言来标记要显示的网页中的各个部分.一套规则,浏览器认识的规则 2. 浏览器按顺序渲染网 ...
- CodeForces 719A Vitya in the Countryside (水题)
题意:根据题目,给定一些数字,让你判断是上升还是下降. 析:注意只有0,15时特别注意一下,然后就是14 15 1 0注意一下就可以了. 代码如下: #pragma comment(linker, & ...