使用React怎么实现父子组件间传值-创新互联
本篇文章为大家展示了使用React怎么实现父子组件间传值,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
创新互联-专业网站定制、快速模板网站建设、高性价比睢县网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式睢县网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖睢县地区。费用合理售后完善,十年实体公司更值得信赖。父组件向子组件传值:
父组件:
import React, { Component } from 'react'; import Child from './chlid'; class parent extends Component{ constructor(props) { super(props); this.state = { txt0:"默认值0", txt1:"默认值1" } } componentDidMount(){ } parToson(){ this.setState({ txt0:"哈哈哈哈" }) } sonToPar(e){ this.setState({ txt1:e }) } render(){ const style={ paddingLeft:"150px" } return() } }接受子组件的传值为:{this.state.txt1}
子组件:
import React, { Component } from 'react'; class child extends Component{ constructor(props) { super(props); this.state = { msg:"啦啦啦啦" } } componentDidMount(){ } render(){ return() } } export default child;接受父组件传的值为:{this.props.message}
github:https://github.com/Rossy11/react/blob/master/src/component/router4.js
补充:
子组件向父组件传值,
同样是父组件:
import React from "react" import ComentList from "./ComentList" class Comment extends React.Component { constructor(props) { super(props); this.state = { parentText: "this is parent text", arr: [{ "userName": "fangMing", "text": "123333", "result": true }, { "userName": "zhangSan", "text": "345555", "result": false }, { "userName": "liSi", "text": "567777", "result": true }, { "userName": "wangWu", "text": "789999", "result": true },] } } fn(data) { this.setState({ parentText: data //把父组件中的parentText替换为子组件传递的值 },() =>{ console.log(this.state.parentText);//setState是异步操作,但是我们可以在它的回调函数里面进行操作 }); } render() { return (//通过绑定事件进行值的运算,这个地方一定要记得.bind(this), 不然会报错,切记切记,因为通过事件传递的时候this的指向已经改变) } } export default Comment;text is {this.state.parentText}
子组件:
import React from "react" class ComentList extends React.Component { constructor(props) { super(props); this.state = ({ childText: "this is child text" }) } clickFun(text) { this.props.pfn(text)//这个地方把值传递给了props的事件当中 } render() { return () } } export default ComentList;{ this.props.arr.map(item => { return (
//通过事件进行传值,如果想得到event,可以在参数最后加一个event, 这个地方还是要强调,this,this,this- {item.userName} 评论是:{item.text}
) }) }
before:
after:
上述内容就是使用React怎么实现父子组件间传值,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联成都网站设计公司行业资讯频道。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网站栏目:使用React怎么实现父子组件间传值-创新互联
标题URL:http://scyanting.com/article/psigh.html