react篇章-React Props
state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。
demo1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body> <div id="example"></div>
<div id = "helloReactZzw"></div>
<script type="text/babel">
function HelloMessage(props) {
return <h1>Hello {props.name}!</h1>;
} class HelloMessageZzw extends React.Component {
render() {
return (
<h1>Hello, {this.props.myname}</h1>
);
}
} const element = <HelloMessage name="Runoob"/>;
const elementZzw = <HelloMessageZzw myname = "zzwLearningReact"/>; //const elementZzw1 = <HelloMessageZzw myname = "zzwLearningReact"/> + <HelloMessage name="Runoob"/>;
//留一下一个问题下次思考 ReactDOM.render(
elementZzw,
document.getElementById('example')
);
</script> </body>
</html>
demo2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body> <div id="example"></div>
<div id = "helloZzw"/>
<script type="text/babel">
class HelloMessage extends React.Component {
render() {
return (
<h1>Hello, {this.props.myname}</h1>
);
}
} HelloMessage.defaultProps = {
name: 'Runoob',
myname:'zzw',
}; const element = <HelloMessage/>; ReactDOM.render(
element,
document.getElementById('helloZzw')
);
</script> </body>
</html>
demo3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body> <div id="example"></div>
<script type="text/babel"> class WebSite extends React.Component {
constructor() {
super(); this.state = {
name: "菜鸟教程",
site: "http://www.runoob.com"
}
}
render() {
return (
<div>
<Name name={this.state.name} />
<Link site={this.state.site} />
</div>
);
}
} class Zzw extends React.Component {//react声明组件时，第一个字母必须大写
constructor() {
super(); this.state = {
name: "我的博客",
site: "https://www.cnblogs.com/zzzzw"
}
}
render() {
return (
<div>
<Zzw1 name={this.state.name} />
<Zzw2 site={this.state.site} />
</div>
);
}
} class Name extends React.Component {
render() {
return (
<h1>{this.props.name}</h1>
);
}
} class Link extends React.Component {
render() {
return (
<a href={this.props.site}>
{this.props.site}
</a>
);
}
} class Zzw1 extends React.Component {
render() {
return (
<h1>{this.props.name}</h1>
);
}
} class Zzw2 extends React.Component {
render() {
return (
<a href={this.props.site}>
{this.props.site}
</a>
);
}
} ReactDOM.render(
<Zzw />,
document.getElementById('example')
);
</script> </body>
</html>
react篇章-React Props的更多相关文章
- react篇章-React State(状态)-组件都是真正隔离的
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- react篇章-React State(状态)-数据自顶向下流动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- react篇章-React State(状态)-将生命周期方法添加到类中
将生命周期方法添加到类中 在具有许多组件的应用程序中,在销毁时释放组件所占用的资源非常重要. 每当 Clock 组件第一次加载到 DOM 中的时候,我们都想生成定时器,这在 React 中被称为挂载. ...
- react篇章-React State(状态)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- react篇章-React Props-Props 验证
React.PropTypes 在 React v15.5 版本后已经移到了 prop-types 库. <script src="https://cdn.bootcss.com/pr ...
- react篇章-React 组件-复合组件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- react篇章-React 组件-向组件传递参数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- react篇章-React 组件-ES6 class 来定义一个组件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- React篇章-React 组件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
随机推荐
- 双11怎么那么强！之二：浅析淘宝网络通信库tbnet的实现
最近开始看Tair的源码实现,Tair的通信使用的是淘宝的开源的网络库tbnet实现.具体来说是依靠tbnet::Transport类型实现,其源代码路径如下:http://code.taobao.o ...
- TED_Topic4：How I fell in love with quasars, blazars and our incredible universe
By Jedidah Isler # Background about our speaker Jedidah Isler studies blazars(耀变天体) — supermassive h ...
- ArchLinux升级后deadbeef无法正常启动的解决办法
deadbeef是一款简约而不简单的音乐播放器, 占资源少, 支持的格式却不少. 昨天对ArchLinux进行了一次全面升级, 经历种种惊险, 终于跨越了从 glibc-2.16 到 glibc-2. ...
- HDU 4370 0 or 1 (最短路）
[题目链接](http://acm.hdu.edu.cn/showproblem.ph Problem Description Given a n/n matrix Cij (1<=i,j< ...
- POJ 1350 Cabric Number Problem （模拟）
题目链接 Description If we input a number formed by 4 digits and these digits are not all of one same va ...
- Python练习-一辆购物车的寂寞都是Alex的错
Alex大神的购物车需求: 商品列表,选择商品后加入购物车,扣款显示余额,如余额不足则提示购买此商品还需充值的金额,退出后自动结账显示余额; # 编辑者:闫龙 #弱鸡购物车程序,需求:定义金额,选择商 ...
- 《区块链100问》第85集：资产代币化之对标美元USDT
USDT是Tether公司推出的对标美元(USD)的代币Tether USD.1USDT=1美元,用户可以随时使用USDT与USD进行1:1兑换.Tether公司执行1:1准备金保证制度,即每个USD ...
- 【codeforces】【比赛题解】#869 CF Round #439 (Div.2)
良心赛,虽然我迟了半小时233333. 比赛链接:#869. 呃,CF的比赛都是有背景的……上次是<哈利波特>,这次是<物语>…… [A]巧妙的替换 题意: Karen发现了石 ...
- 新手向-同步关键字synchronized对this、class、object、方法的区别
synchronized的语义 实验 分析 在看源代码时遇到多线程需要同步的时候,总是会看见几种写法,修饰方法.修饰静态方法.synchronized(Xxx.class).synchronized( ...
- MFC将二进制文件导入资源后释放
1.前言 前一篇笔记记录了怎么修改PE,此篇记录下如何利用自身的资源文件. 2.编程思路 获得资源句柄 - 获得资源文件大小 - 加载资源文件 - 锁定资源并获得其指针. 3.实践代码 1)编译以下代 ...