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 ...
随机推荐
- python sqlite3 入门 (视频讲座)
python sqlite3 入门 (视频讲座) an SQLite mini-series! - Simple Databases with Python 播放列表: YouTube https:/ ...
- idea 常用快捷使用
一.智能提示 1.快速移动到错误代码 :Shift+F2 或者 f2/ 2.快速修复:Alt+Enter 3.快速生成括号:Ctrl+Shift+Enter 二.重构 1.重构功能汇总:Ctrl+Sh ...
- 把JS和CSS合并到1个文件
合并JS文件和CSS文件很多人都知道,也用过,目的是为了减少请求数.但有时候我们觉的把JS合并到1个文件,CSS又合并到另外1个文件也是浪费,我们如何能把CSS和JS一起合并进1个文件了? 这里需要使 ...
- [hadoop]hadoop api 新版本与旧版本的差别
突然现在对以后的职业方向有些迷茫,不知道去干什么,现在有一些语言基础,相对而言好的一些有Java和C,选来选去不知道该选择哪个方向,爬了好多网页后,觉得自己应该从java开始出发,之前有点心不在焉,不 ...
- 20155336 2016-2017-2《JAVA程序设计》第五周学习总结
20155336 2016-2017-2<JAVA程序设计>第五周学习总结 教材学习内容总结 第八章 语法与继承构架 使用try.catch 特点: 使用try.catch语法,JVM会尝 ...
- 【译】第六篇 Replication：合并复制-发布
本篇文章是SQL Server Replication系列的第六篇,详细内容请参考原文. 合并复制,类似于事务复制,包括一个发布服务器,一个分发服务器和一个或多个订阅服务器.每一个发布服务器上可以定义 ...
- 在Linode VPS上搭建最新版Transmission
在Linode VPS上搭建最新版Transmission 2015-09-16 by Hansen 原文链接:http://www.hansendong.me/archives/124.html 以 ...
- [转]KMP 算法
KMP 算法,俗称“看毛片”算法,是字符串匹配中的很强大的一个算法,不过,对于初学者来说,要弄懂它确实不易.整个寒假,因为家里没有网,为了理解这个算法,那可是花了九牛二虎之力!不过,现在我基本上对这个 ...
- ubuntu16.04 源码方法安装tensorflow
参考博客:http://blog.csdn.net/zhaoyu106/article/details/52793183/,http://blog.csdn.net/u010900574/articl ...
- SELinux 入门【转】
一.前言 安全增强型 Linux(Security-Enhanced Linux)简称 SELinux,它是一个 Linux 内核模块,也是 Linux 的一个安全子系统.SELinux 主要由美国国 ...