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学习笔记3-函数的递归
递归就是指自己函数的自我调用 #递归 #自己调用自己,函数的循环 def test1(): num = int(input('please enter a number:')) if num%2==0 ...
- Android 5.0 最应该实现的8个期望
毫无疑问,Android 5 将是令人兴奋的操作系统,因为 Android4.0 至 4.4 版本之间并没有显著的差异,显然谷歌会在 5.0 版本中进行一些较大幅度的革新.那么,代号为“柠檬芝士蛋糕” ...
- Javascript Ajax异步读取RSS文档
RSS 是一种基于 XML的文件标准,通过符合 RSS 规范的 XML文件可以简单实现网站之间的内容共享.Ajax 是Asynchronous JavaScript and XML的缩写.通过 Aja ...
- 【BearChild】
\(≧▽≦)/ BearChild is salty. If you want to save him,please call QQ:423339833 to talk♂with him. Have ...
- 差分约束系统+（矩阵）思维（H - THE MATRIX PROBLEM HDU - 3666 ）
题目链接:https://cn.vjudge.net/contest/276233#problem/H 题目大意:对于给定的矩阵 每一行除以ai 每一列除以bi 之后 数组的所有元素都还在那个L- ...
- vue写出放大镜的效果
用vue写出放大镜查看图片的效果. 安装 npm install vue2.0-zoom 引入 import imgZoom from 'vue2.0-zoom' 组件 components: { i ...
- Python标准库笔记(8) — pprint模块
struct模块提供了用于在字节字符串和Python原生数据类型之间转换函数,比如数字和字符串. Python版本: 2.x & 3.x 该模块作用是完成Python数值和C语言结构体的Pyt ...
- linux===sar命令性能监控
sar介绍: sar是System Activity Reporter(系统活动情况报告)的缩写.sar工具将对系统当前的状态进行取样,然后通过计算数据和比例来表达系统的当前运行状态.它的特点是可以连 ...
- MySQL5.7之多源复制&Nginx中间件（下）【转】
有生之年系列----MySQL5.7之多源复制&Nginx中间件(下)-wangwenan6-ITPUB博客http://blog.itpub.net/29510932/viewspace-1 ...
- p,br,hn,b,i,u,s,sup,sub标签
<!-- -->注释 <p></p>段落标签 <br />换行标签 <h1></h1> 字体标签 最大 <h6> ...