使用React怎么实现父子组件间传值-创新互联
本篇文章为大家展示了使用React怎么实现父子组件间传值，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
父组件向子组件传值：
父组件：
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(
接受父组件传的值为：{this.props.message}
this.props.getsonToPar(this.state.msg)}>传值给父组件
)
}
}
export default child;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的指向已经改变
text is {this.state.parentText}
)
}
}
export default Comment;子组件：
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 (
{
this.props.arr.map(item => {
return (
{item.userName} 评论是:{item.text}
)
})
}
//通过事件进行传值，如果想得到event，可以在参数最后加一个event，
这个地方还是要强调，this，this，this
click me
before：
after：
上述内容就是使用React怎么实现父子组件间传值，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联成都网站设计公司行业资讯频道。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
标题名称：使用React怎么实现父子组件间传值-创新互联
标题来源：http://mswzjz.cn/article/psigh.html