zoukankan      html  css  js  c++  java
  • react基础用法二(组件渲染)

    react基础用法二(组件渲染)

    如图所示组件可以是函数

    格式:function 方法名(){ return <标签>内容</标签>}

    渲染格式: <方法名 /> 即可把方法体内的内容渲染到页面

    如图所示这是像组件内传递渲染元素

    在react都基本由props来接受传入的参数和react基础一的方法一样传入的都是key:value  这里key是name,value则是cookie

    所以在当你要取元素的时候是props.key也就是props.name来获取name里面的value值

    格式:function 方法名(props接受元素){ return <标签>内容</标签>}

    渲染格式: <方法名 key=value /> 即可把方法体内的内容渲染到页面,多个以空格隔开,注意如果要传入的是数字需要用{}包裹

    如图所示同一个组件也可以多次复用

    如图所示你也可以使用一个类来当组件但是注意一定要extends Component组件不然会报错提示没法引用一个类来使用

    格式:class 类名 extends Component { render(){ return ( <标签>内容</标签> );这里的分号也不要忘了养好习惯 } }

    渲染格式: <类名称 />即可把类当组件把里面的内容渲染到页面

    这次简单介绍了组件的渲染方法和属性props的简单使用,顺便补充一下props里面的内容是只读状态,你不能使用props.name="其他值"去做更改,但是可以在组件<组件名 key=在传入的时候去覆盖原先元素值  />

  • 相关阅读:
    Java中字符串indexof() 的使用方法
    .Net Core WebApi(3)—NLog
    .Net Core WebApi(2)—Swagger
    left join 左边有数据,右边无数据
    Angular—入门环境,项目创建,导入项目
    SQLite介绍和使用
    .Net Core-类库中创建CodeFirst
    .Net Core WebApi(1)— 入门
    .Net Jpush极光推送
    Webform中的前后端分离
  • 原文地址:https://www.cnblogs.com/cookie1026/p/10181771.html
Copyright © 2011-2022 走看看