时间戳

首页 > 解决方案 > React中从父组件传递给子组件的“未定义”？

javascript - React中从父组件传递给子组件的“未定义”？

问题描述

我有以下带有父类和子类的代码，父类是容器，子类在屏幕上显示结果。但是我无法将值从父类传递给子类。每当我尝试传递值时，我都会得到未定义

家长班

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}
           />
        );
    }
}

儿童班

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>
  );
}
   }

渲染

ReactDOM.render(
      <Presentation />
      , 
      document.querySelector("#container1")
    );

表单正在正确呈现，但值没有从父级传递给子级。alert(this.props.course}给出未定义的

标签： javascriptreactjsbabeljs

解决方案

你说你有一个容器组件，但是你直接渲染了子组件Presentation。

ReactDOM.render(
      <Presentation />
      , 
      document.querySelector("#container1")
    );

尝试渲染容器，例如

ReactDOM.render(
  <Container />,
  document.querySelector("#container1")
);

并查看是否呈现容器、创建状态并将预期的道具传递给Presentation.

推荐阅读