Props 实现父与子通信:
import React from 'react'; import ReactDOM from 'react-dom'; export default class CptBody extends React.Component{ constructor(){ super(); this.state = {username : "父级名称"}; //可以传json等很多格式(这个是初始化赋值) } //click事件函数 changeAge(){ this.setState({username:"父级名称--修改"}) } //change事件函数 changeUsername(event){ this.setState({username:event.target.value}) } render(){ return( <div> <h1>这里是主体内容部分</h1> <p>{this.state.username}</p> <input type="button" value="点击改变username" onClick={this.changeAge.bind(this)}/> <BodyChild changeUsername={this.changeUsername.bind(this)}/> </div> ) } } class BodyChild extends React.Component{ render(){ return( <div> <p>子页面输出:<input type='text' onChange={this.props.changeUsername} /></p> </div> ) } }
如果想实现“父级”同步“子级”的数据,则需要在子级数据发生改变的时候,调用执行父级props传来的回调,从而达到父级同步更新的效果。
来补充一下上面那位同学所说的。很多情况下,子控件需要父控件所有的 props 参数,这个时候我们一个一个参数的写会很麻烦,比如:
<Name name={this.props.name} url={this.props.url} .../>
那么我们怎么样吧父属性直接赋值给子组件的props参数呢?如下写法即可:
<Name props={this.props}/>
这样写就非常简洁了,也就子控件和父控件都有了同样数据结构的 props 参数。
很多情况下我们调试页面时,看到的参数名在父控件和子控件中部一样,但是表示的值是同一个,写这段代码的人可能还记得这个参数是转译的,但是其他人阅读时就会摸不着头脑,在效率上是处于弱势的,所以我们一般建议引用父组件参数尽量保持名称不变,以便以后维护。
上次在 React 组件看到这篇笔记没看懂,原来是这里的,现在贴过来分享一下。但是自己现在还是不太懂,希望过几天再来看的时候能够明白。
对创建多个组件的代码,做了点小修改,帮助大家理解。
<WebSite name="小鸟启蒙" site=" http://www.facesoho.com" />,这种形式传入的 name 和 url 值,只能在 WebSit 组件中用 this.props.xxx 来使用。虽然原来的代码中,Name 和 Site 组件中也是以同样的形式使用的,但并不是因为这条语句的作用,而是因为 <Name name={this.props.name} /> <Link site={this.props.site} /> 。所以我特意将这几行代码做了修改,方便大家感受感受!
WebSite 组件中:
<Name title={this.props.name}/> // 将this.props.name以title名称传给Name组件,Name通过this.props.title来使用其值 <Url site={this.props.url}/> // 将this.props.url以site名称传给Url组件,Url通过this.props.site来使用其值
Name 组件中:
<h1>{this.props.title}</h1>
Site 组件中:<a href={this.props.site}>{this.props.site}</a>
关于挂载时的 setInterval 中调用 tick() 的方式 ()=>this.tick():
1、()=>this.tick()
()=>this.tick() 是 ES6 中声明函数的一种方式,叫做箭头函数表达式,引入箭头函数有两个方面的作用:更简短的函数并且不绑定 this。
var f = ([参数]) => 表达式(单一) // 等价于以下写法 var f = function([参数]){ return 表达式; }
箭头函数的基本语法如下:
(参数1, 参数2, …, 参数N) => { 函数声明 } (参数1, 参数2, …, 参数N) => 表达式(单一) //相当于:(参数1, 参数2, …, 参数N) =>{ return 表达式; } // 当只有一个参数时,圆括号是可选的: (单一参数) => {函数声明} 单一参数 => {函数声明} // 没有参数的函数应该写成一对圆括号。 () => {函数声明}
根据以上概念,尝试将 setInterval 中调用 tick() 的方式改为通常声明方式:
this.timerID = setInterval(function(){ return this.tick(); },1000 );
但是会报错,tick() 不是一个方法。
2、this.tick()
this.tick() 中的 this 指代的是 function,而不是我们想要的指代所在的组件类 Clock,所以我们要想办法让 this 能被正常指代。这里我们采用围魏救赵的办法:
let that = this; this.timerID = setInterval(function () { return that.tick(); },1000);
在闭包函数的外部先用 that 引用组件 Clock 中挂载组件方法 componentDidMount() 中 this 的值,然后在 setInterval 中闭包函数中使用that,that 无法找到声明,就会根据作用域链去上级(上次层)中继承 that,也就是我们引用的组件类 Clock 中的 this。
<Name title={this.props.name}/> // 将this.props.name以title名称传给Name组件,Name通过this.props.title来使用其值 <Url site={this.props.url}/> // 将this.props.url以site名称传给Name组件,Name通过this.props.site来使用其值
Site 组件中:
<a href={this.props.site} rel="nofollow">{this.props.site}</a>
感谢您的支持,我会继续努力的!
支付宝扫一扫,即可进行扫码打赏哦
656React Props
Props 实现父与子通信:
如果想实现“父级”同步“子级”的数据,则需要在子级数据发生改变的时候,调用执行父级props传来的回调,从而达到父级同步更新的效果。
655React Props
来补充一下上面那位同学所说的。很多情况下,子控件需要父控件所有的 props 参数,这个时候我们一个一个参数的写会很麻烦,比如:
那么我们怎么样吧父属性直接赋值给子组件的props参数呢?如下写法即可:
这样写就非常简洁了,也就子控件和父控件都有了同样数据结构的 props 参数。
很多情况下我们调试页面时,看到的参数名在父控件和子控件中部一样,但是表示的值是同一个,写这段代码的人可能还记得这个参数是转译的,但是其他人阅读时就会摸不着头脑,在效率上是处于弱势的,所以我们一般建议引用父组件参数尽量保持名称不变,以便以后维护。
654React Props
上次在 React 组件看到这篇笔记没看懂,原来是这里的,现在贴过来分享一下。但是自己现在还是不太懂,希望过几天再来看的时候能够明白。
对创建多个组件的代码,做了点小修改,帮助大家理解。
<WebSite name="小鸟启蒙" site=" http://www.facesoho.com" />,这种形式传入的 name 和 url 值,只能在 WebSit 组件中用 this.props.xxx 来使用。虽然原来的代码中,Name 和 Site 组件中也是以同样的形式使用的,但并不是因为这条语句的作用,而是因为 <Name name={this.props.name} /> <Link site={this.props.site} /> 。所以我特意将这几行代码做了修改,方便大家感受感受!
WebSite 组件中:
Name 组件中:
Site 组件中:<a href={this.props.site}>{this.props.site}</a>
653React State(状态)
关于挂载时的 setInterval 中调用 tick() 的方式 ()=>this.tick():
1、()=>this.tick()
()=>this.tick() 是 ES6 中声明函数的一种方式,叫做箭头函数表达式,引入箭头函数有两个方面的作用:更简短的函数并且不绑定 this。
箭头函数的基本语法如下:
根据以上概念,尝试将 setInterval 中调用 tick() 的方式改为通常声明方式:
但是会报错,tick() 不是一个方法。
2、this.tick()
this.tick() 中的 this 指代的是 function,而不是我们想要的指代所在的组件类 Clock,所以我们要想办法让 this 能被正常指代。这里我们采用围魏救赵的办法:
在闭包函数的外部先用 that 引用组件 Clock 中挂载组件方法 componentDidMount() 中 this 的值,然后在 setInterval 中闭包函数中使用that,that 无法找到声明,就会根据作用域链去上级(上次层)中继承 that,也就是我们引用的组件类 Clock 中的 this。
到此为止,将 () => this.tick()等价代换为了我们熟悉的形式。652React 组件
对创建多个组件的代码,做了点小修改,帮助大家理解。
<WebSite name="小鸟启蒙" site=" http://www.facesoho.com" />,这种形式传入的 name 和 url 值,只能在 WebSit 组件中用 this.props.xxx 来使用。虽然原来的代码中,Name 和 Site 组件中也是以同样的形式使用的,但并不是因为这条语句的作用,而是因为 <Name name={this.props.name} /> <Link site={this.props.site} /> 。所以我特意将这几行代码做了修改,方便大家感受感受!
WebSite 组件中:
Name 组件中:
Site 组件中: