Question

我有一个带有父级和子级的以下代码，父级是Container，子级在屏幕上显示结果。但是，我无法将值从父级传递给子级。每当我尝试传递值时，我都无法定义

父母阶级

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}给出了未定义

Answer 1

您说您有一个容器组件，但您是直接呈现子组件Presentation。

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

尝试渲染容器，例如

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

然后查看是否渲染了容器，创建了状态并将预期的道具传递给Presentation。

在React中从父组件传递到子组件的“未定义”？

1 个答案: