Javascript 反应代码以显示不起作用的详细信息

我试图执行一个简单的react代码来显示细节-

html-

<div id="root"></div>

这是反应代码-

function User(props){
  return (
  <div>
    <h1>{props.user_details.firstname}</h1>
    <h1>{props.user_details.lastname}</h1>
    <h1>{props.user_details.email}</h1>
  </div>  
  );  
}

function Address(props){
  return (
  <div>
      <h2>{props.address_details.city}</h2>                   <h2>{props.address_details.state}</h2>
      <h2>{props.address_details.zip}</h2>
  </div>    
  );
}

function Bundle(props){
  return (
  <div>
    <User user_details={props.user} />  
    <Address address_details={props.address} /> 
  </div>  
  );
}

const info = {
  user: {
    firstname: 'Arjun',
    lastname: 'G',
    email: 'aaaaaaaaa',
  },
  address: {
    city: 'bbbb',
    state: 'ccccc',
    zip: '333333',  
  },
};

ReactDOM.render(
  <Bundle user={info.user} address={info.address} />, document.getElementById(root)
);

功能用户（道具）{
返回(
{props.user_details.firstname}
{props.user_details.lastname}
{props.user_details.email}
);  
}
功能地址（道具）{
返回(
{props.address_details.city}{props.address_details.state}
{props.address_details.zip}
);
}
功能包（道具）{
返回(
);
}
常数信息={
用户：{
名字：“阿琼”，
姓氏：“G”，
电子邮件：'aaaaaaaaaaaaaaa'，
},
地址:{
城市：“bbbb”，
声明：“ccccc”，
zip:'333333'，
},
};
ReactDOM.render(
，document.getElementById（根目录）
);

---

它显示了一个空白页。我仔细检查了一遍，找不到错误。我是新的反应，并考虑通过文件和代码笔编码的一面。但是我被困在这里了。请帮忙

我想你遗漏了root的引号

document.getElementById('root')

你应该得到一个错误，说

目标容器不是DOM元素

---

为您的解决方案创建了一个

在控制台中是否有任何错误日志？键入

文档。getElementById（root）

而不是

文档。getElementById（“root”）

。是的，您的代码查找名为

root

的变量，而不是使用文本

“root”

。