第一个react项目

出错的地方都注释起来了,有时间总结一下错误原因及处理方法

/*
window.localStorage.person=JSON.stringify([
    { "name": "张大明", "age":"17", "sex": "男" ,"picture":"./img/boy.jpg"},

    { "name": "李凯", "age":"20", "sex": "男","picture":"./img/boy2.jpg"},

    {  "name": "王小源", "age":"14", "sex": "女","picture":"./img/girl.jpg" },

    {  "name": "赵小云", "age":"14", "sex": "女","picture":"./img/girl2.jpg" }]);

var temp=JSON.parse(window.localStorage.person);
console.log(temp);
temp.push({"name":"user_name","age":"user_name","sex":"user_name","picture":"user_name"});
console.log(temp);
window.localStorage.person=JSON.stringify(temp);
*/
//判断是否支持localstroge
if(window.localStorage){
    //如果不存在已经初始化过的存储用户信息的变量,则执行初始化操作
    if(!window.localStorage.getItem('userInfo'))
    {
        //默认用户数据
        window.localStorage.userInfo=JSON.stringify([
            { "name": "张大明", "age":"17", "sex": "男" ,"picture":"./img/boy.jpg"},

            { "name": "李凯", "age":"20", "sex": "男","picture":"./img/boy2.jpg"},

            {  "name": "王小源", "age":"14", "sex": "女","picture":"./img/girl.jpg" },

            {  "name": "赵小云", "age":"14", "sex": "女","picture":"./img/girl2.jpg" }
        ]);
    }
    //刷新页面后,新添加的数据丢失的原因:
    //每次重新打开页面都会执行默认初始化动作,所以改变的数据都会被初始化数据覆盖
}else{
    alert('This browser does NOT support localStorage');
}
var dateAry=localStorage.getItem("userInfo");
dateAry=JSON.parse(dateAry);
//建一个组件
var UserList = React.createClass({
    //显示详细信息
   showClick:function(event){
       var ul=this.refs.tip;
       var target=event.target;
       var detail=null;
       if(target.tagName.toLowerCase() == 'div'){
            detail=target.parentNode.childNodes[1];
           if(detail.style.display=="block"){
               detail.style.display='none';
           }else{
               detail.style.display='block';
           }
       }else if(target.tagName.toLowerCase() == 'img'&& target.className.toLowerCase() == 'expand_img'){
           detail=target.parentNode.parentNode.nextSibling;
           if(detail.style.display=="block"){
               detail.style.display='none';
           }else{
               detail.style.display='block';
           }
       }
       /*if(detail.style.display=="block"){
           detail.style.display='none';
       }else{
           detail.style.display='block';
       }*/
       event.stopPropagation();
       event.preventDefault();
       /* var tips=this.refs.tip.getElementsByTagName("li");
         for(let i=0;i
                 
{item.name}
性别:{item.sex}年龄:{item.age}
); } return (
    {newArr}








); } }); ReactDOM.render( , document.getElementById('app') );

你可能感兴趣的:(第一个react项目)