React Props

新宇平台 2019-06-12 12:23139http://www.ldyeya.com/admin

tco***ence@gmail.com

上次在 React 组件看到这篇笔记没看懂,原来是这里的,现在贴过来分享一下。但是自己现在还是不太懂,希望过几天再来看的时候能够明白。

对创建多个组件的代码,做了点小修改,帮助大家理解。

<WebSite site=" " />,这种形式传入的 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=http://www.runoob.com/react/{this.props.site}>{this.props.site}</a>

年轻的C同学

tco***ence@gmail.com

10个月前 (08-08)

#3

xjjuser

xjj***r@yeah.net

来补充一下上面那位同学所说的。很多情况下,子控件需要父控件所有的 props 参数,这个时候我们一个一个参数的写会很麻烦,比如:

<Name name={this.props.name} url={this.props.url} .../>

那么我们怎么样吧父属性直接赋值给子组件的props参数呢?如下写法即可:

<Name props={this.props}/>

这样写就非常简洁了,也就子控件和父控件都有了同样数据结构的 props 参数。

很多情况下我们调试页面时,看到的参数名在父控件和子控件中部一样,但是表示的值是同一个,写这段代码的人可能还记得这个参数是转译的,但是其他人阅读时就会摸不着头脑,在效率上是处于弱势的,所以我们一般建议引用父组件参数尽量保持名称不变,以便以后维护。

xjjuser

xjj***r@yeah.net

10个月前 (08-10)

#2

doo0301@qq.com

doo***1@qq.com

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传来的回调,从而达到父级同步更新的效果。

doo0301@qq.com

doo***1@qq.com

7个月前 (11-22)

#1

独孤尚良

yut***hanlin@qq.com

借助楼上的代码,做了个改良,下面的父子模块互相传递参数。

class CptBody extends React.Component{ constructor(){ super(); this.state = {username : 1}; //可以传json等很多格式(这个是初始化赋值) } //click事件函数 changeAge(){ this.setState({username:1+this.state.username}) } //change事件函数 changeUsername(event){ this.setState({username:parseInt(event.target.value)}) } render(){ return( <div> <h1>下面的操作有惊喜</h1> <p>{this.state.username}</p> <input type="button" value="点击改变username" onClick={()=>this.changeAge()}/> <BodyChild changeUsername={this.changeUsername.bind(this)} getname={this.state.username}/> </div> ) } } class BodyChild extends React.Component{ render(){ return( <div> <p>子页面输入:<input type='text' value={this.props.getname} onChange={this.props.changeUsername} /></p> </div> ) } } ReactDOM.render( <CptBody />, document.getElementById('example') );

尝试一下 »

BodyChild 组件的 render 函数返回值 jsx 中 <p> 的 value 是从父组件获取的 getname 这个变量值,onChange 获取的是 changeUsername 这个函数,所以如果文本框中的值改变了,改变值这个事件会触发 changeUsername 这个函数,这个函数会获得事件的值,即我们文本框修改后的值,并将其赋值给父组件的 state.username 这个变量。而父组件的这个变量改变后,state 随之改变,这时候,render 会重新启动,所以我们会看到修改后的值。

父组件的 jsx 中有一个箭头函数,有一个 bind 函数,这两者有什么区别吗?经验证,这两者是可以互换的。

onClick={this.changeAge.bind(this)}onClick={()=>this.changeAge()} 可以互换。

新宇平台_正规彩票网:React Props

Copyright © 2002-2019 新宇平台_正规彩票网 版权所有 备案号:鄂ICP备12013336号-2 鄂公网安备61032703000198