props的验证：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title></title>
  7.         <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  8.         <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  9.         <!-- 生产环境中不建议使用 -->
  10.         <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  11.         <script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>
  12.     </head>
  13.  
  14.     <body>
  15.         <div id="app">
  16.  
  17.         </div>
  18.         <script type="text/babel">
  19.         //props验证借助第三方库 prop-types.js
  20.         var title = "验证传过来的数据类型是否正确?";
  21.         //var title = 666;
  22.         class Title extends React.Component {
  23.           render() {
  24.             return (
  25.               <h1>得到的props验证:{this.props.title}</h1>
  26.             );
  27.           }
  28.         }
  29.         Title.propTypes = {
  30.           title: PropTypes.string //属性 title 是必须的且是字符串，非字符串类型会自动转换为字符串并且控制台警告如title = 666;
  31.         };
  32.         ReactDOM.render(
  33.             <Title title={title} />,
  34.             document.getElementById('app')
  35.         );
  36.         </script>
  37.     </body>
  38.  
  39. </html>

state和props的互用：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title></title>
  7.         <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  8.         <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  9.         <!-- 生产环境中不建议使用 -->
  10.         <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  11.     </head>
  12.  
  13.     <body>
  14.         <div id="app">
  15.  
  16.         </div>
  17.         <!--Props验证-->
  18.         <!--React.PropTypes在 React v15.5 版本后已经移到了 prop-types 库。-->
  19.         <!--<script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>-->
  20.         <script type="text/babel">
  21.         //state和 props主要的区别在于 props是不可变的，而 state可以根据与用户交互来改变;
  22.         //子组件只能通过 props来传递数据;
  23.         //组合使用 state 和 props;
  24.         class WebSite extends React.Component {
  25.           constructor() {
  26.               super();
  27.               this.state = { //父组件中设置 state,并通过在子组件上使用 props将其传递到子组件上;
  28.                 name: "react基础语法",
  29.                 website: "https://www.baidu.com"
  30.               }
  31.             }
  32.           render() {
  33.               //设置 name和 website来获取父组件传递过来的数据
  34.             return (
  35.               <div>
  36.                 <Name name={this.state.name} />
  37.                 <Web website={this.state.website} />
  38.               </div>
  39.             );
  40.           }
  41.         }
  42.         class Name extends React.Component {
  43.           render() {
  44.             return (
  45.               <h1>{this.props.name}</h1>
  46.             );
  47.           }
  48.         }
  49.         class Web extends React.Component {
  50.           render() {
  51.             return (
  52.               <a href={this.props.website}>
  53.                 {this.props.website}
  54.               </a>
  55.             );
  56.           }
  57.         }
  58.         ReactDOM.render(
  59.           <WebSite />,
  60.           document.getElementById('app')
  61.         );
  62.         </script>
  63.     </body>
  64.  
  65. </html>

react基础语法（五） state和props区别和使用的更多相关文章

  1. react基础篇五

    再看JSX 本质上来讲,JSX 只是为 React.createElement(component, props, ...children) 方法提供的语法糖.比如下面的代码: <MyButto ...

  2. react 基础语法复习3- 数据传递 & 数据变化(props&&state)

    react当中的数据传递是通过 props以及 state来实现的 props <Header name="kugeliu" /> Header组件当中有个name属性 ...

  3. react基础语法（四） state学习

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. React基础语法学习

    React主要有如下3个特点: 作为UI(Just the UI) 虚拟DOM(Virtual DOM):这是亮点 是React最重要的一个特性 放进内存 最小更新的视图,差异部分更新 diff算法 ...

  5. react基础语法二

    这里只是对自己的学习进行一次总结,也是为了让自己以后如果长时间不使用快速记忆起来的笔记,如果想要学习,还是去官网看文档比较好一些.. 注意 下面的代码的 script标签的type类型都为 “text ...

  6. react 基础语法使用

    刚开始不久react,在菜鸟上及其他前辈网站上学习,下面开始我的自学笔记. 包括: 渲染元素 组件(函数方法定义.es6 class定义) 事件处理 条件渲染 列表 下面代码部分将不会再写html部分 ...

  7. react基础语法（一）元素渲染和基础语法规则

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. react 基础语法复习2- react入门以及JSX

    引入 react 以及 ReactDom import React from 'react'; import ReactDOM from 'react-dom'; 将react组件渲染到真实dom节点 ...

  9. react基础语法（三）组件的创建和复合组件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. laravel打印原生语句

    laravel中快捷方便的打印语句的方法步骤一:DB::connection()->enableQueryLog();$data["banner"] = WebsiteBan ...

  2. Dijkstra再理解+最短路计数

    众所周知,Dijkstra算法是跑单源最短路的一种优秀算法,不过他的缺点在于难以处理负权边. 但是由于在今年的NOI赛场上SPFA那啥了(嗯就是那啥了),所以我们还是好好研究一下Dij的原理和它的优化 ...

  3. CMake学习记录--list（列表操作命令）

    CMake是一个跨平台的工程管理工具,能方便的把工程转换为vs各个版本.Borland Makefiles.MSSYS Makefiles.NMake Makefiles等工程,对于经常在不同IDE下 ...

  4. Code：zabbix 目录

    ylbtech-Code:zabbix 目录 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://y ...

  5. LightOJ 1140 How Many Zeroes? (数位DP)

    题意:统计在给定区间内0的数量. 析:数位DP,dp[i][j] 表示前 i 位 有 j 个0,注意前导0. 代码如下: #pragma comment(linker, "/STACK:10 ...

  6. React 从入门到进阶之路（九）

    之前的文章我们介绍了 React propTypes  defaultProps.接下来我们将介绍 React 生命周期函数. 之前我们已经根据 create-react-app 模块创建了一个 Re ...

  7. POJ2533/hdoj1950【DP】

    O(nlog(n))的方法: 定义d[k]:长度为k的上升子序列的最末元素,若有多个长度为k的上升子序列,则记录最小的那个最末元素. d中元素也是单调递增的. #include <iostrea ...

  8. template code 引用的一些问题

    1.问题: 引用同一个norlib.tt 下面的tt  . 一个KSTrade 正确. 一个 NDAP就报错. 报错说源文件某个函数有错误 helper.Common.tt 错误 2.结果: NDAP ...

  9. ssh密钥的分发之一：ssh-copy-id

    ssh密钥的分发 我们在使用客户端账号对主机记性管理的时候,可以分为以下两种情况: .第一种情况,直接使用root账号: 优点:使用root账号密钥分发简单,指令执行简单 缺点:不安全 .第二种情况, ...

  10. Xor-sequences CodeForces - 691E || 矩阵快速幂

    Xor-sequences CodeForces - 691E 题意:在有n个数的数列中选k个数(可以重复选,可以不按顺序)形成一个数列,使得任意相邻两个数异或的结果转换成二进制后其中1的个数是三的倍 ...