Question

错误：无法读取未定义的属性'mountComponent'

不能在一个文件中使用多个组件

class Application extends React.Component {

  student = {
      name : 'Jacob',
      course: {name : 'ReactJs', duration: '3 hrs'},
      fee: 10000
  }

  render() {
    return <div>
      <p>Welcome</p>
      <Student student={this.student}/>
    </div>
  }
}

function Course(props) {
      return (
          <div className="course">
          <p> Course Name : {props.course.name}</p>
          <p> Course Duration : {props.course.duration}</p>
        </div>
           ); 
}

const Fee = (props) => {
    return (
      <div className="fee">
        <h4>Fees : {props.fee}</h4>
        </div>
    )
}

class Student extends React.Component {
    render(){
        return (
          <div className="student">
            <p> Name : {this.props.student.name} </p>
            <Course course={this.props.student.course} />
            <Fee fee={this.props.student.fee} />
          </div>
        )
    }
}

Demo

有时尝试使用类，函数和箭头方法连接多个组件。

是否需要多个文件？

Answer 1

好吧，它是ReactDOM.render()而不是React.render()：

ReactDOM.render(<Application />, document.getElementById("root"));

正在运行的演示：CodeSandbox

错误：无法读取未定义的属性“ mountComponent”

1 个答案: