Reactjs 反应JSX问题

我第一次尝试React，我尝试在另一个类中呈现一个类，React组件似乎没有出现在网页上。我不确定到底出了什么问题。如果有人能帮我，那就太好了

这是我的一个js文件

class PersonalDetails extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      firstName: "",
      lastName: "",
      email: "",
      mobile: ""
    };
  }


  render() {
    const { firstName, lastName, email, mobile } = this.state;
    const { handleChange } = this.props;
    return (
      <form>
        <div class="name">
          <label>First Name</label>
          <input
            type="text"
            value={firstName}
            onChange={handleChange("firstName")}
          ></input>
          <label>Last Name</label>
          <input
            type="text"
            value={lastName}
            onChange={handleChange("lastName")}
          ></input>
        </div>
        <div class="contact-info">
          <label>Email</label>
          <input
            type="text"
            value={email}
            onChange={handleChange("email")}
          ></input>
          <label>Mobile Number</label>
          <input
            type="text"
            value={mobile}
            onChange={handleChange("mobile")}
          ></input>
        </div>
        <button>Next</button>
      </form>
    );
  }
}

export default PersonalDetails; 

类PersonalDetails扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
名字：“，
姓氏：“，
电邮：“，
流动电话：“
};
}
render（）{
const{firstName，lastName，email，mobile}=this.state；
const{handleChange}=this.props；
返回(
名字
姓
电子邮件
手机号码
下一个
);
}
}
导出默认个人详细信息；

我在这个类中使用了上面的类

import PersonalDetails from "./personal_details";

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      step: 1 // keep track of which form to show
    };
  }

  // increment step
  nextStep = () => {
    const { step } = this.state;
    this.setState({
      step: step + 1
    });
  };

  prevStep = () => {
    const { step } = this.state;
    this.setState({
      step: step - 1
    });
  };

  // handle all field changes
  handleChange = input => event => {
    this.setState({
      [input]: event.target.value
    });
  };

  render() {
    const { step } = this.state;
    switch (step) {
      case 1:
        return (
          <PersonalDetails
            handleChange={this.handleChange} // attributes passed down are props
            nextStep={this.nextStep}
          />
        );
      case 2:
        return <h1>Location</h1>;
      case 3:
        return <h1>Selling</h1>;
      case 4:
        return <h1>Learning </h1>;
      case 5:
        return <h1>Buying</h1>;
    }
  }
}

let domContainer = document.querySelector("#form_container");
ReactDOM.render(<Form />, domContainer);

从“/personal\u details”导入个人详细信息；
类形式扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
步骤：1//跟踪要显示的表单
};
}
//增量步长
下一步=（）=>{
const{step}=this.state；
这是我的国家({
步骤：步骤+1
});
};
prevStep=（）=>{
const{step}=this.state；
这是我的国家({
步骤：步骤-1
});
};
//处理所有字段更改
handleChange=input=>event=>{
这是我的国家({
[输入]：event.target.value
});
};
render（）{
const{step}=this.state；
开关（步骤）{
案例1：
返回(
);
案例2：
返回位置；
案例3：
退货销售；
案例4：
回归学习；
案例5：
回购；
}
}
}
让domContainer=document.querySelector（“#form_container”）；
render（，domContainer）；

（稍后我将用组件更改h1标记） 这是我的HTML文件

<!-- REACT -->
    <div id="form_container"></div>              
    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <!-- To use JSX -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <!-- Load our React component. -->
    <script src="form.js"></script>
    <!-- REACT -->

您的代码没有问题。你有任何错误吗？我没有任何错误，但是网页上没有出现任何东西。我复制了你的代码并将其粘贴到codesandbox中，它可以正常工作-