[英]'Undefined' passed from parent to child component in React?
I have the following code with a parent and a child class, The parent class is the Container and the child presents the results on the screen.However I am unable to pass values from parent to child.我有以下代码与父和子 class,父 class 是容器,孩子在屏幕上显示结果。但是我无法将值从父母传递给孩子。 Whenever I try to pass the value, I get undefined
每当我尝试传递值时,我都会得到未定义
Parent Class父 Class
class Container extends React.Component{
constructor(props) {
super(props);
this.state = {course:"Commerce",grade:"10",btnState:"Add"}
}
render(){
return (
<Presentation course={this.state.course} grade={this.state.grade} btnState={this.state.btnState}
/>
);
}
}
Child Class儿童 Class
class Presentation extends React.Component {
debug(){
alert(this.props.course)
}
render () {
return (
<div>
<form>
<input type="text" value={this.props.course} /><br/><br/>
<input type="text" value={this.props.grade} /><br/><br/>
<input type="reset" id="addCourse" value={this.props.btnState}
onClick={this.debug.bind(this)}/>
</form>
</div>
);
}
}
The Rendering渲染
ReactDOM.render(
<Presentation />
,
document.querySelector("#container1")
);
The form is rendering correctly but the values are not being passed into the child from the parent.表单正在正确呈现,但值没有从父级传递给子级。
alert(this.props.course}
gives undefined alert(this.props.course}
给出未定义
You say you have a container component, but you're directly rendering the child component Presentation
.你说你有一个容器组件,但你直接渲染子组件
Presentation
。
ReactDOM.render( <Presentation />, document.querySelector("#container1") );
Try rendering the container, eg尝试渲染容器,例如
ReactDOM.render(
<Container />,
document.querySelector("#container1")
);
And see if that renders the container, creates state, and passes the expected props to Presentation
.并查看是否呈现容器,创建 state,并将预期的道具传递给
Presentation
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.