本文目录
目录
*1.子组件父组件
*2.简单的样式
*3.简单的绑定数据
//*4.循环对象(会在下个笔记中)
*5.添加事件
*6.事件中获取对象
*7.更新对象
1.子组件父组件
在上个章节第一次使用WebPack来写React章节,可以运行基本的Hello World。
这里,初始化同样的目录,尝试嵌套组件,即子组件和父组件。
想到一个需求,一个简单的图片文字列表,单击图片会弹出图片对应的标题和详情。
在 components 文件夹新建 panel.jsx 组件:
'use strict';
var React = require("react");
module.exports=React.createClass({
render: function () {
return //todo
}
});
用父组件 panels 来包含 panel
新建 panels.jsx :
'use strict';
var React = require('react')
//var ReactDOM = require('react-dom')
var Panel = require('./panel')
module.exports = React.createClass({
displayName: 'panels',
render: function () {
return <div>
<Panel/>
<Panel/>
</div>
}
});
将组件输出的html页面上
同样用上一章节第一次使用WebPack来写React的 index.html.
将组件输入到 id 为 content 的div上。
添加 index.jsx
'use strict';
//var React = require('react')
var ReactDOM = require('react-dom')
//var Panel=require('./panel')
var Panels = require('./panels')
ReactDOM.render(
<Panels/>//据说这叫复合组件,组件panels引用了组件panel,组件集合么?XD
,document.getElementById('content')
)
npm run start
既可以运行
2.简单的样式
在 1 中,输出的html并没什么复杂的样式,现在写一个图文排版的简单的div样式:
<body>
<div style="width:350px;height:300px;border:1px solid silver;-moz-box-shadow:2px 2px 13px #333333; -webkit-box-shadow:2px 2px 13px #333333; box-shadow:2px 2px 13px #333333;">
<div style="width:320px;height:240px;margin:auto auto">
<img src="http://img.99diary.com/blog/src/201603161422/logo.jpg" width="320" height="240" />
</div>
<div style="width:320px;height:50px;margin:10px auto auto auto;">
<div style="width:40px;float:left;">
<img src="http://img.99diary.com/blog/src/201603161422/logo.jpg" width="38" height="38" />
</div>
<div style="width:280px;float:left;">
<div>《疯狂动物城》,迪斯尼的又一杰作...</div>
<div>
2016-03-15
</div>
</div>
</div>
</div>
</body>
将html布局放入 panel.jsx 组件中:
'use strict';
var React = require("react");
module.exports=React.createClass({
render: function () {
//todo
return <div style={{"width":"350px","height":"300px","border":"1px solid silver","MozBoxShadow":"2px 2px 13px #333333","WebkitBoxShadow":"2px 2px 13px #333333","BoxShadow":"2px 2px 13px #333333"}}>
<div style= {{"width":"320px","height":"240px","margin":"auto auto"}}>
<img src="http://img.99diary.com/blog/src/201603161422/logo.jpg" width="320" height="240" />
</div>
<div style={{"width":"320px","height":"50px","margin":"10px auto auto auto"}}>
<div style={{"width":"40px","float":"left"}}>
<img src="http://img.99diary.com/blog/src/201603161422/logo.jpg" width="38" height="38" />
</div>
<div style={{"width":"280px","float":"left"}}>
<div>让《疯狂动物城》背后的迪士尼告诉...</div>
<div>
2016-03-15
</div>
</div>
</div>
</div>
}
});
3.简单的绑定数据
React会根据状态(State)进行渲染,组件默认是null,但是可以通过它的getInitialState方法将其初始化为合理的值。
在这个实例中,我们可以对 图片链接,标题,发布时间来设置一个对象:
getInitialState:function () {
return {
logo: "http://img.99diary.com/blog/src/201603161422/logo.jpg",
title: "让《疯狂动物城》背后的迪士尼告诉...",
publishdate:"2016-03-15"
}
}
以上设置了 图片logo,标题,和发布时间,到这里,可以在render中读取this.state,以便向用户展示当前表单中的所有数据。
这里有点向AngularJS1中的$scope
AngularJS1实战,
更新一下panel代码
'use strict';
var React = require("react");
module.exports=React.createClass({
getInitialState:function () {
return {
logo: "http://img.99diary.com/blog/src/201603161422/logo.jpg",
title: "让《疯狂动物城》背后的迪士尼告诉...",
publishdate:"2016-03-15"
}
},
render: function () {
//todo
return <div style={{"width":"350px","height":"300px","border":"1px solid silver","MozBoxShadow":"2px 2px 13px #333333","WebkitBoxShadow":"2px 2px 13px #333333","BoxShadow":"2px 2px 13px #333333"}}>
<div style= {{"width":"320px","height":"240px","margin":"auto auto"}}>
<img src={this.state.logo} width="320" height="240" />
</div>
<div style={{"width":"320px","height":"50px","margin":"10px auto auto auto"}}>
<div style={{"width":"40px","float":"left"}}>
<img src={this.state.logo} width="38" height="38" />
</div>
<div style={{"width":"280px","float":"left"}}>
<div>{this.state.title}</div>
<div>
{this.state.publishdate}
</div>
</div>
</div>
</div>
}
});
看到了一样的效果
4.循环对象
我们让列表(panels)中的 panel 呈现不同的内容。
5.添加事件
给图片添加一个点击事件,点击之后获取图片信息:
onClick={this.showdetail}
showdetail: function (event) {
}
综上更新代码为:
```jsx
'use strict';
var React = require("react");
module.exports=React.createClass({
getInitialState:function () {
return {
logo: "http://img.99diary.com/blog/src/201603161422/logo.jpg",
title: "让《疯狂动物城》背后的迪士尼告诉...",
publishdate:"2016-03-15"
}
},
render: function () {
//todo
return <div style={{"width":"350px","height":"300px","border":"1px solid silver","MozBoxShadow":"2px 2px 13px #333333","WebkitBoxShadow":"2px 2px 13px #333333","BoxShadow":"2px 2px 13px #333333"}}>
<div style= {{"width":"320px","height":"240px","margin":"auto auto","cursor":"pointer"}} onClick={this.showdetail}>
<img src={this.state.logo} width="320" height="240" />
</div>
<div style={{"width":"320px","height":"50px","margin":"10px auto auto auto"}}>
<div style={{"width":"40px","float":"left"}}>
<img src={this.state.logo} width="38" height="38" />
</div>
<div style={{"width":"280px","float":"left"}}>
<div>{this.state.title}</div>
<div>
{this.state.publishdate}
</div>
</div>
</div>
</div>
},
showdetail: function (event) {
//获取点击的对象信息
//event.targe
//event.targe.height
//event.targe.width
//event.targe.src
//获取对象绑定的数据对象
//this
console.log(this);
}
});
6.事件中获取对象
断点上一节这里的console.log 可以发现:
event.target 获取 生成图片DOM
this.state 数据对象
7.更新对象
可以通过更改 数据对象 的属性来修改页面显示的信息
showdetail: function (event) {
this.state.title="《疯狂动物城2》即将上映";
})
然而这种方式似乎并不正确,页面的DOM并没有被重新渲染更新。
其实React有两种更新数据的方法:
setState 把传入的对象合并到已有的state对象
replaceState 会用一个全新的state对象替换原有的state
showdetail: function (event) {
this.setState({title:'《疯狂动物城2》即将上映'});
})