<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><div id="example1"></div><hr><div id="example2"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js/react-dom.development.js"></script><script type="text/javascript" src="../js/prop-types.js"></script><script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">    /*    *   需求：自定义用来显示一个人员信息的组件，效果如页面.说明：        1.如果性别没有指定，默认为男        2.如果年龄没有指定，默认为18    * */    //1.定义组件 (简单)    /*function Person(props) {        return (            <ul>                <li>姓名：{props.name}</li>                <li>年龄：{props.age}</li>                <li>性别：{props.sex}</li>            </ul>        )    }*/

    //1.定义组件(复杂)    class Person extends React.Component {

        render() {            console.log(this);            return (                <ul>                    <li>姓名：{this.props.name}</li>                    <li>年龄：{this.props.age}</li>                    <li>性别：{this.props.sex}</li>                </ul>            )        }    }

    //指定属性默认值    Person.defaultProps = {        sex: '男',        age: 18    };    //指定属性值的类型和必要性    Person.propTypes = {        name: PropTypes.string.isRequired,        sex: PropTypes.string,        age: PropTypes.number    };

    //2.渲染组件标签    const person = {        name: 'Tom',        age: 18,        sex: '女'    };    /*    *   ...的作用    *   1.打包    *   function fn(...as) {} fn(1, 2, 3)    *   2.解包    *   const arr1 = [1, 2, 3] const arr2 = [6, ...arr1, 9]    * */    ReactDOM.render(<Person {...person}/>, document.getElementById('example1'));

    const person2 = {        myName: 'Jack',        age: 17    };    ReactDOM.render(<Person name={person2.myName} age={person2.age}/>, document.getElementById('example2'));</script>

</body></html>

08_组件三大属性(2)_props的更多相关文章

  1. React组件三大属性之 refs

    React组件三大属性之 refs refs属性 1) 组件内的标签都可以定义ref属性来标识自己 a. <input type="text" ref={input => ...

  2. React组件三大属性之 props

    React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中 作用1) 通过标签属性从组件外向组件内传递变 ...

  3. React组件三大属性之state

    React组件三大属性之state 组件被称为"状态机", 页面的显示是根据组件的state属性的数据来显示 理解1) state是组件对象最重要的属性, 值是对象(可以包含多个数 ...

  4. 09_组件三大属性(3)_refs和事件处理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 07_组件三大属性(1)_state

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 组件的三大属性state，props，refs与事件处理

    组件的三大属性state state是组件对象最重要的属性, 值是对象(可以包含多个数据),组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件) 初 ...

  7. React 三大属性state,props,refs以及组件嵌套的应用

    React 三大属性state,props,refs以及组件嵌套的应用 该项目实现了一个简单的表单输入添加列表的内容 代码如下 <!DOCTYPE html> <html> & ...

  8. React组件的属性

    组件的三大属性 state props refs 写组件的要求: 1>组件必须大写 2>组件必须只有一个根元素 state是组件的重要对象 值可以是对象 组件被称之为 状态机 通过跟新组件 ...

  9. vue-learning：29 - component - 组件三大API之三：slot

    组件三大API之三: slot <slot>标签 v-slot指令 普通插槽 有默认值的插槽 具名插槽 作用域插槽 v-slot是Vue 2.6.0引入的一个新语法指令,目的是统一之前sl ...

随机推荐

  1. Scala集合类型详解

    Scala集合 Scala提供了一套很好的集合实现,提供了一些集合类型的抽象. Scala 集合分为可变的和不可变的集合. 可变集合可以在适当的地方被更新或扩展.这意味着你可以修改,添加,移除一个集合 ...

  2. console.log()换行和document.write()换行

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

  3. PG cannot execute UPDATE in a read-only transaction | How to add column if not exists on PostgreSQL

    PG cannot execute UPDATE in a read-only transaction出现这种情况时,说明SQL语句可能是运行在一个PG集群中的非master节点上.查看data/pg ...

  4. centos7.0下增加swap分区大小

    承接上篇文章扩容磁盘空间后增加根分区的大小后,来扩容swap分区的空间 检查当前的swap分区情况 # free -m # free -g [root@localhost ~]# free -m to ...

  5. Jmeter（四）NO-GUI模式运行

    在前几篇中有提到NO-GUI模式的运行,是的,Jmeter支持NO-GUI方式的运行. 如果Jmeter的环境搭建完毕,那么在命令行下执行jmeter - ?便会出现jmeter的各个参数 --? p ...

  6. [UE4]裁剪 Clipping

    Clipping裁剪,是每个UI都有的属性.一般是在容器UI上设置,对容器内的UI进行裁剪. 一.Clip to Bounds:裁剪到边界 二.Clip To Bounds - Without Int ...

  7. Linux 网络命令找不到

    1.安装好系统,命令找不到 如ifconfig等 解决办法: sudo apt-get install net-tools sudo ifconfig 如果命令前不想加sudo 在 .bashrc 文 ...

  8. at android.view.LayoutInflater.createViewFromTag的错误原因

    创建对话框时出现下面的错误: Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'boolean ...

  9. 第11章 拾遗1：网络地址转换(NAT)和端口映射

    1. 网络地址转换(NAT) 1.1 NAT的应用场景 (1)应用场景:允许将私有IP地址映射到公网地址,以减缓IP地址空间的消耗 ①需要连接Internet,但主机没有公网IP地址 ②更换了一个新的 ...

  10. @ResponseBody返回中文乱码

    1.在方法上修改编码 这种方式,需要对每个方法都进行配置. 2.修改springmvc的配置文件 同时注意,把这个配置写在扫描包的上面.