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 ...
随机推荐
- 计算广告学-多点归因模型(Multi-Touch Attribution Model)
计算广告学中的一个重要的问题是, 如果用户产生了一次转化(conversion, 比如购买, 注册等), 且该用户在转化之前看过大量不同频道(比如搜索, 展示, 社交等等)的广告, 那么我们如何确定是 ...
- 【BZOJ】3160: 万径人踪灭 FFT+回文串
[题意]给定只含'a'和'b'字符串S,求不全连续的回文子序列数.n<=10^5. [算法]FFT+回文串 [题解]不全连续的回文子序列数=回文子序列总数-回文子串数. 回文子串数可以用回文串算 ...
- BZOJ1822 Frozen Nova 冷冻波
1822: [JSOI2010]Frozen Nova 冷冻波 Time Limit: 10 Sec Memory Limit: 64 MB Description WJJ喜欢“魔兽争霸”这个游戏. ...
- UNIX网络编程 第4章 基本TCP套接字编程
本章的几个函数在很大程度上展示了面向对象与面向过程的不同之处.
- js数组排序 reverse()和sort()方法的使用
WEB前端|js数组排序reverse()和sort()方法的使用,数组中已经存在两个可以直接用来重排序的方法:reverse()和sort(). reverse()方法会对反转数组项的顺序. var ...
- sql_injection之基本get注入
1.代码篇 <?php error_reporting(0); include("../conn.php"); if(isset($_GET['id'])){ $id=$_G ...
- 【连接查询】mySql多表连接查询与union与union all用法
1.准备两个表 表a: 结构: mysql> desc a; +-------+-------------+------+-----+---------+-------+ | Field | T ...
- oracle同义词是什么意思？
相当于alias,比如把user1.table1 在user2中建一个同义词table1create synonym table1 for user1.table1;这样当我们在user2中查sele ...
- ActiveMQ监听消息并进行转发,监听不同的mq服务器和不同的队列
工作中刚接触mq消息业务,其实也就是监听一下别的项目发送的消息然后进行对应的转发,但是监听的mq会有多个,而且转发的地址也可能有多个,这里就使用spring集成的方式!记录一下实现方式: 监听多个mq ...
- aarch64_g3
glibc-langpack-wal-2.25-6.fc26.aarch64.rpm 2017-06-20 17:08 210K fedora Mirroring Project glibc-lang ...