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区别和使用的更多相关文章

  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. maven实战（4）-- maven构建自己的jar到本地仓库中

    在平时的开发中,经常需要用到自己以前开发的一个jar包,那么如何使用将自己开发的jar提交到本地仓库中,供其他的项目依赖呢?主要有三种方法: (1)使用mvn的构建命令:mvn clean insta ...

  2. 【BZOJ 2721】 樱花

    [题目链接] 点击打开链接 [算法] 令n!=z,因为1 / x + 1 / y = 1 / z,所以x,y>z,不妨令y = z + d 则1 / x + 1 / (z + d) = 1 / ...

  3. linux--vsftpd的安装和配置（转）

    Linux下如何进行FTP设置(转) [TOC] Redhat/CentOS安装vsftp软件 1. 安装vsftp $ yum install vsftpd -y 2. 添加ftp帐号和目录 先检查 ...

  4. div 加滚动条的方法

    div 加滚动条的方法: <div style="position:absolute; height:400px; overflow:auto"></div> ...

  5. B. Mishka and trip

    time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...

  6. vim中编辑了代码 但是提示can not write的解决办法和代码对齐办法

    方式1: 1 :w /tmp/xxxx(如果是c文件就.c拉)  保存在/tmp下面 2 从tmp中复制到有权限的目录下面 cp /tmp xxxx ./(当前目录) 方式2::w !sudo tee ...

  7. /proc/interrupts 和 /proc/stat 查看中断的情况 （转载）

    转自:http://blog.csdn.net/richardysteven/article/details/6064717 在/proc文件系统下,又两个文件提供了中断的信息. /proc/inte ...

  8. 网易蜂巢（云计算基础服务）MongoDB服务重磅来袭

    此文已由作者温正湖授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. MongoDB是目前最为流行的NoSQL数据库,在2017年1月新鲜出炉的数据库权威排行榜上,MongoDB ...

  9. iOS中音频的录制与播放（本地音频文件的播放）

    iOS功能开发涉及到音频处理时,最常见的时进行录音,以及音频文件的播放.停止播放等的操作.在开发中还要避免同一个音频文件,或不同音频文件之间的处理,比如说正在播放A音频时,可以停止播放A音频,也可以播 ...

  10. 浅谈欧拉函数 By cellur925

    1.某神犇Blog 学了三遍的 欧拉函数φ--DEADFISH7 2.我要做一些补充o(*￣▽￣*)o $φ(1)=1$: 公式有两种形式,一种有太多除法,实际可能会慢些.通用 对于任意$n$> ...