React之props基本使用
<!DOCTYPE html>
<html>
<head>
<meat charset="UTF-8">
<title>1_props基本使用</title>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<!-- 核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- react-dom,操作dom -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 此处一定要写babel -->
<script type="text/babel">
//1.创建组件
class Person extends React.Component{
render(){
console.log(this);
const {name,age,sex} = this.props
return(
<ul>
<li>姓名：{name}</li>
<li>性别：{sex}</li>
<li>年龄：{age}</li>
</ul>
)
}
}
//2.渲染组件到页面
ReactDOM.render(<Person name="jerry" age="19" sex="男"/>, document.getElementById('test1'));
ReactDOM.render(<Person name="lucy" age="15" sex="男" />, document.getElementById('test2'));
ReactDOM.render(<Person name="Bom" age="69" sex="男" />, document.getElementById('test3'));
</script>
</body>
</html>
React之props基本使用相关推荐
- React - children props 与 render props
React - children props 与 render props 一. children props 1. 函数组件形式 2. 类组件形式 二. render props 1. 函数组件形式 ...
- react路由props
react路由props 一.match匹配的路由 1.params 路由的参数 (!!!) 2.isExact 是否精确匹配 3.path路径 4.url地址 (!!!) 二.history 历史记 ...
- React的Props校验与默认值
React的Props使用 React的props校验 一.使用步骤: props校验需要先安装prop-types这个库 npm i -S prop-types 引用prop-types imp ...
- 【React】Props
向组件传递参数(Props) Passing Props to a Component | React 中文文档 | React 中文网 props 就是用于和其他组件交流,父组件都可以传递信息给子组 ...
- react 的props和state
props 当前组件的组件标签身上的所有属性和子节点构成的集合: 可以用来组件传递数据,一般用于父子组件之间: this.props对象的属性与组件的属性一一对应,但对于组件标签的子节点,this.p ...
- React中props与state的区别
首先,props与state是React组件的两种方法. props,可以在组件中来获取this.props的属性. var Helloreact=React.createClass({render: ...
- 前端学习（2307）：react之props和state
Home,js import React, {Component} from 'react'; import News from "./News"; class Home exte ...
- React之props批量传递
<!DOCTYPE html> <html> <head> <meat charset="UTF-8"> <title> ...
- React Render props
首先打个广告,系列文章: 古老的React mixins HOC(高阶组件) render props React Hooks 下面进入正题: 什么是Render props A render pro ...
最新文章
- 前端测试 karma mocha should 都是什么鬼？
- java队列等待唤醒_Java深入学习29：线程等待和唤醒的两个方案
- 极速理解设计模式系列：2.观察者模式(Observer Pattern)
- mysql和springboot对照_SpringBoot(六) SpirngBoot与Mysql关系型数据库
- 如何把meshlab中的圆环去掉_如何设计一座太空城？
- 技术干货 | “选图预览并上传”的场景如何解？全网最全方案汇总来了
- 我说程序员要测试自己的代码，结果被怼！
- win10一直卡在自动修复_分享：win10自动修复过程中无法正确启动怎么办？
- 线程池——JAVA并发编程指南
- Android应用程序访问linux驱动第二步：实现并测试hardware层
- WPS导入SQLSERVER的数据
- ppt模板怎样用到html中,手把手教你怎么选用PPT模板
- java实现马尔科夫链,马尔科夫链算法的JAVA实现
- 免费试用腾讯云服务器 + nginx建网站
- win10怎么装c语言,WIN10上安装编写C++ C语言的软件教程
- Google Guava简介
- C语言斗地主课程设计,智能斗地主课程设计论文.doc
- 普歌--前端 vue-element-admin 实现第三方(无账号密码)登录
- python爬取小说写入txt_python 爬取网络小说 清洗 并下载至txt文件
- 已注册LODOP出现水印的解决办法