[英]how to Pass Data between Parent and Child Components
i am learning to pass data between parent and child components via a tutorial. 我正在学习通过教程在父子组件之间传递数据。 i double checked my code and still couldn't figure out the mistake.
我仔细检查了我的代码,但仍然无法找出错误。
my index.js 我的index.js
import React, {Component} from 'react';
import ReactDom from 'react-dom';
import {Header} from './components/Header';
import {Home} from './components/Home';
class App extends Component {
constructor(){
super();
this.state ={
HomeLink:"home"
};
}
onGreet(){
alert("hello");
}
onChangeLinkName(newName){
this.setState({
HomeLink:newName
});
}
render(){
return (
<div className="container">
<div className="row">
<div className="col-xs-10 col-xs-offset-1">
<Header HomeLink={this.state.HomeLink} />
</div>
</div>
<div className="row">
<div className="col-xs-10 col-xs-offset-1">
<Home
name={"max"}
initialAge={27}
greet={this.onGreet}>
changeLink={this.onChangeLinkName.bind(this)}
<p>This is a paragraph passed from props</p>
</Home>
</div>
</div>
</div>
);
}
}
ReactDom.render(
<App/>, window.document.getElementById("root")
);
Home.js Home.js
the button change link onClick event is calling changeLink function which pass the newlink to props. 按钮更改链接onClick事件正在调用changeLink函数,该函数将newlink传递给props。
import React from 'react';
export class Home extends React.Component {
constructor(props){
super();
this.state = {
age:props.initialAge,
status:0,
homeLink:"changed link"
};
setTimeout(() => {
this.setState({
status:1
});
},3000);
}
onMakeOlder(){
this.setState({
age:this.state.age+3
});
}
onChangeLink(){
this.props.changeLink(this.state.homeLink);
}
render(){
return(
<div>
<p>In a new Component</p>
<p>Your name is {this.props.name} and your age is {this.state.age}</p>
<p>{this.state.status}</p>
<hr/>
<button onClick={()=> this.onMakeOlder()}>make me older</button>
<hr/>
<button onClick={this.props.greet}>greet</button>
<hr/>
<button onClick={this.onChangeLink.bind(this)}>change link</button>
</div>
);
}
}
Home.propTypes = {
name:React.PropTypes.string,
age:React.PropTypes.number,
user:React.PropTypes.object,
children: React.PropTypes.element.isRequired,
greet:React.PropTypes.func,
changeLink:React.PropTypes.func
};
the error:- 错误:-
Uncaught TypeError: this.props.changeLink is not a function
There is a typo in the code. 代码中有错字。
<Home
name={"max"}
initialAge={27}
greet={this.onGreet}>
changeLink={this.onChangeLinkName.bind(this)}
<p>This is a paragraph passed from props</p>
</Home>
Notice how you are closing the Home
component right after setting the property greet
with this character : >
. 请注意,设置属性以以下字符
greet
后,如何立即关闭Home
组件: >
。 You want to close it after you set changeLink
as a prop so move that >
down to after this.onChangeLinkName.bind(this)}
您想要在将
changeLink
设置为prop后关闭它,所以将>
向下移动到this.onChangeLinkName.bind(this)}
That will fix your error and you should be able to move forward. 这将解决您的错误,您应该可以继续前进。
Switch the prop you're passing to: 将您要传递的道具切换到:
changeLink={this.onChangeLinkName}
and in the constructor of the parent: 并在父级的构造函数中:
this.onChangeLinkName = this.onChangeLinkName.bind(this);
Lastly, in your button call: 最后,在您的按钮呼叫中:
<button onClick={this.props.changeLink(this.state.homeLink)}>change link</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.