最近学习浅尝则止的学习了一下react.js这个UI的框架,react这个库给我的最大的感觉就是它能够完全的接管UI层,在要改变视图的东西的时候只需要改变其this.state中的状态。只要操作数据层的东西视图层就会发生变化,这一点我还是很喜欢的。可以摆脱对DOM的直接操作,毕竟直接来会比较复杂,本来应该是逻辑层js中混杂着各种css的字符串,对于我来说有点不爽(JSX中也混杂这标签,但我觉的不应该把它看作标签,看作语句会习惯一点)。
回到几天的重点,讲react组件之间的状态传递。
上代码:
1.定义两个子组件child-1和child-2
rush:js;">
//child-1 子组件-1为输入框
class Input extends React.Component{
constructor(...args){
super(...args);
}
render(){
return
显示框
class Show extends React.Component{
constructor(...args){
super(...args);
}
render(){
return
}
}
2.定义父组件Parent并且将两个子组件插入到父组件中
rush:js;">
class Parent extends React.Component{
constructor(...args){
super(...args);
}
render(){
return(
);
}
}
现在的任务是在组件1总输入一些文字,同时在组件2中同时显示出来。
分析:
要让组件2与组件1同步,就让组件1和2都去绑定父组件的状态。也就是说让两个组件受控。数据的走向是,组件1将自身的数据提升到父层,并且保存在父层的状态中。父层中的数据通过组件2中的props
属性传递到组件2中,并在视图层进行绑定。
第一步先绑定组件
rush:js;">
//在父层中的constructor中定义状态为
一个空的message,this.state = {message:''}
class Parent extends React.Component{
constructor(...args){
super(...args);
this.state = {
message:''
}
然后在父组件中的改为
rush:js;">
接着来我们进入到组件中,给其内容绑定这个穿件来的onShow属性。组件变为
rush:js;">
class Show extends React.Component{
constructor(...args){
super(...args);
}
render(){
return
{this.props.onShow}
}
这样组件2显示层的数据已经绑定好了,接下来我们只要改变父亲层状态中的message的内容就可以使绑定的显示层的内容跟着一起变化
将输入层的状态(数据)提升到父亲组件中.下面是改写后的组件1
rush:js;">
class Input extends React.Component{
constructor(...args){
super(...args);
}
//将输入的
内容更新到自身组件的状态中,并且将改变后的状态作为参数传递给该组件的
一个自定义属性onInp()
fn(ev){
this.props.onInp(ev.target.value);
}
render(){
//用onInput(注意react中采用驼峰写法和原生的略有不同)绑定fn()
函数
return
}
}
看到这里可能会有一个问题:onInp()和content没有啊?不要急,接着看
接着改写父组件中的输入层子组件1,
rush:js;">
class Parent extends React.Component{
constructor(...args){
super(...args);
this.state = {
message:''
};
}
//传进的text是其提升上来的状态,然后再更新父组件的状态
fn(text){
this.setState({
message:text
})
}
render(){
return(
/*
onInp就出现
在这里,并绑定
一个函数,并且有
一个content将父组件的状态同步到子组件中
*/
);
}
}
写完的代码是这样的
rush:js;">
// 父组
class Parent extends React.Component{
constructor(...args){
super(...args);
this.state = {
message:''
};
}
onInp(text){
this.setState({
message:text
})
}
render(){
return(
);
}
}
//child-1
class Input extends React.Component{
constructor(...args){
super(...args);
}
fn(ev){
this.props.onInp(ev.target.value);
}
render(){
return
}
}
//child-2
class Show extends React.Component{
constructor(...args){
super(...args);
}
render(){
return
{this.props.onShow}
}
}
//最后渲染出
ReactDOM.render(
,document.getElementById('app')
);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
原文地址:https://www.jb51.cc/js/38312.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。