react技术全家桶（6）jsx语法规则demo的练习 有些注意事项

实现通过后端获取数据并且实现如下页面：

1.方法一 写死
const VDOM = (

前端js框架列表

• 
  
• Angular
• 
  
• React
• 
  
• Vue
• 
  

    )

2.写法二
会发现 react会自动遍历数据 展示到页面上 是个 AngularReactVue
const data =[‘Angular’,‘React’,‘Vue’]
const VDOM = (

前端js框架列表

• 
  {data}
  

    )        

结果：

3.方法三：
const data2 =[

• Angular
• ,
• React
• ,
• Vue
• ]
  const VDOM = (
  
  
  

  前端js框架列表

  
  

  • 
    {data2}
    

  
  

      )
      结果出来了：
  

  

  但是,后端不会返回如此数据哈

  4.方法四：
  const obj ={name1:’’,name2:’’,name3:’’}
  const VDOM = (
  

  
  

  前端js框架列表

  
  

  • 
    {obj}
    

  
  

      )
  

  啥都没有。报错了
  
  报错意思是说 object不是一个有效的react 合法的节点 react已经找到了name1,name2,name3，如果你想渲染集合 就用数组代替

  5.方法五：遍历data发现会报错。
  
  报错是因为 jsx只能写js表达式 而不能写js语句(代码)
  注意：一定要区分js语句(代码)和js表达式
  1.表达式：一个表达式会产生一个值，可以放在任何地方
  以下都是表达式 可以用一个变量接
  （1）a 单独变量a是一个表达式 只不过是没有定义
  （2）a+b
  (3)demo(1)
  (4)arr.map()
  (5)funcation test(){}
  以下都是语句（代码）：
  （1）if（）{}
  （2）for（）{}
  （3）switch(){}

  输写表达式：
  const VDOM = (
  

  
  

  前端js框架列表

  
  

  • 
    {
    data.map((item)=>{
    return
  • item
  • 
    })
    }

              </ul>
          </div>
      )
  

  结果有问题：
  
  所以得给tiem加{}：
  const VDOM = (
  

  
  

  前端js框架列表

  
  

  • 
    {
    data.map((item)=>{
    return
  • {item}
  • 
    })
    }

              </ul>
          </div>
  
      )
  

  这样才正确，但是控制台报错了
  
  报错意思是：在这个列表单中必须得有一个唯一的属性。因为在虚拟DOM中每一个元素都要有唯一身份，来支撑虚拟DOM的算法。
  那就使用索引，这么写：
  const VDOM = (
  

  
  

  前端js框架列表

  
  

  • 
    {
    data.map((item,index)=>{
    return
  • {item}
  • 
    })
    }

              </ul>
          </div>
  
      )
  

  空控制台是不报错了 但是这种写法有很大问题，因为其他列表也用索引就会重复的。目前就这么些 后期解决

  源码：