最近学习浅尝则止的学习了一下react.js这个UI的框架，react这个库给我的最大的感觉就是它能够完全的接管UI层，在要改变视图的东西的时候只需要改变其this.state中的状态。只要操作数据层的东西视图层就会发生变化，这一点我还是很喜欢的。可以摆脱对DOM的直接操作，毕竟直接来会比较复杂，本来应该是逻辑层js中混杂着各种css的字符串，对于我来说有点不爽（JSX中也混杂这标签，但我觉的不应该把它看作标签，看作语句会习惯一点）。
回到几天的重点，讲react组件之间的状态传递。
上代码：
1.定义两个子组件child-1和child-2
//child-1 子组件-1为输入框
class Input extends React.Component{
constructor(...args){
super(...args);
}
render(){
return <input type="text"/>
}
}
//child-2 子组-2为显示框
class Show extends React.Component{
constructor(...args){
super(...args);
}
render(){
return <p></p>
}
}
2.定义父组件Parent并且将两个子组件插入到父组件中
class Parent extends React.Component{
constructor(...args){
super(...args);
}
render(){
return(
<div>
<Input}/>
<Show/>
</div>
);
}
}
现在的任务是在组件1总输入一些文字，同时在组件2中同时显示出来。
分析：要让组件2与组件1同步，就让组件1和2都去绑定父组件的状态。也就是说让两个组件受控。数据的走向是，组件1将自身的数据提升到父层，并且保存在父层的状态中。父层中的数据通过组件2中的props属性传递到组件2中，并在视图层进行绑定。
第一步先绑定<Show/>组件
//在父层中的constructor中定义状态为一个空的message，this.state = {message:''}
class Parent extends React.Component{
constructor(...args){
super(...args);
this.state = {
message:''
}
然后在父组件中的<Show/>改为
<Show onShow={this.state.message}/>
接着来我们进入到<Show/>组件中，给其内容绑定这个穿件来的onShow属性。<Show/>组件变为
class Show extends React.Component{
constructor(...args){
super(...args);
}
render(){
return <p>{this.props.onShow}</p>
}
这样组件2显示层的数据已经绑定好了，接下来我们只要改变父亲层状态中的message的内容就可以使绑定的显示层的内容跟着一起变化
将输入层的状态(数据)提升到父亲组件中.下面是改写后的组件1
class Input extends React.Component{
constructor(...args){
super(...args);
}
//将输入的内容更新到自身组件的状态中,并且将改变后的状态作为参数传递给该组件的一个自定义属性onInp()
fn(ev){
this.props.onInp(ev.target.value);
}
render(){
//用onInput(注意react中采用驼峰写法和原生的略有不同)绑定fn()函数
return <input type="text" onInput={this.fn.bind(this)} value={this.props.content}/>
}
}
看到这里可能会有一个问题:onInp()和content没有啊"htmlcode">
class Parent extends React.Component{
constructor(...args){
super(...args);
this.state = {
message:''
};
}
//传进的text是其提升上来的状态,然后再更新父组件的状态
fn(text){
this.setState({
message:text
})
}
render(){
return(
<div>
/*
onInp就出现在这里,并绑定一个函数,
并且有一个content将父组件的状态同步到子组件中
*/
<Input onInp={this.fn.bind(this)} content={this.state.message}/>
<Show onShow={this.state.message}/>
</div>
);
}
}
写完的代码是这样的
// 父组
class Parent extends React.Component{
constructor(...args){
super(...args);
this.state = {
message:''
};
}
onInp(text){
this.setState({
message:text
})
}
render(){
return(
<div>
<Input onInp={this.onInp.bind(this)} content={this.state.message}/>
<Show onShow={this.state.message}/>
</div>
);
}
}
//child-1
class Input extends React.Component{
constructor(...args){
super(...args);
}
fn(ev){
this.props.onInp(ev.target.value);
}
render(){
return <input type="text" onInput={this.fn.bind(this)} value={this.props.content}/>
}
}
//child-2
class Show extends React.Component{
constructor(...args){
super(...args);
}
render(){
return <p>{this.props.onShow}</p>
}
}
//最后渲染出
ReactDOM.render(
<Parent/>,
document.getElementById('app')
);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。