React.js学习笔记

&&运算符，三木运算符与React的条件渲染

在使用react框架的时候中往往会遇到需要条件渲染的情形，这时候，许多人会设想采用if语句来实现，比如下面，当满足条件condition时，conditonRender渲染组件ComponentA,当不满足 条件时，渲染ComponentB

const conditionRender = () =>{
   if(condition){
       return <ComponentA />
     }
   else{
       return <ComponentB />
    }
}

其实，结合三木运算符以及JSX的语法糖，它在形式和逻辑上可以变得更紧凑一些，比如：

const conditionRender = () =>{
    return {condition?<componentA />:<componentB />}
}

同样的一些情况，我们也可以尝试用&&运算符实现条件渲染，比如在满足条件condition时，conditonRender渲染组件Component

const conditionRender = () =>{
   if(condition){
       return <Component />
     }
}

改成如下，因为&&运算符的特性，当condition为true时需要检查&&后面那个表达式boolean值（true or false），那么Component就被渲染出来，而当conditon为false时，不在检查&&运算符后面表达式的boolean值,那么Component就被隐藏了

const conditionRender = () =>{
   return {condition&&<Component />}
}

总结：其实两者效果一样，但在大量而复杂的代码块里，&&运算符和三木运算符的合理使用显然会大大增强代码的可读性

谈谈出入React框架踩过的坑

1 在JSX的元素中写入内联样式，例如<div style={"color:blue"}></div>

报错：warning：Style prop value must be an object  react/style-prop-object

原因：在React框架的JSX编码格式要求，style必须是一个对象

解决方法：除了外部那个表示Javascript语句的花括号外，里面必须再写一个花括号{}包含的对象，例如<div style={ {  color:“blue”  } }></div>，外部的{ }表示这是Javascript句法，里面的{  }是一个对象

2写入表格

<table>
   <tr>
       <td></td>
   </tr>
</table>

报错：Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table>

原因：在React中<tr>元素不可以作为<table>元素的直接子元素

解决方法：在<tr>元素tbody和<table>元素中间插入<tbody>元素，如：

<table>
 <tbody>
   <tr>
       <td></td>
   </tr>
 <tbody>
</table>

3遍历数组元素：

var arr=[1,2,3]
arr.map(function(x){
            return (<div></div>);
        })

报错：Warning:Each child in an array or iterator should have a unique "key" prop. Check the render method of `NavBlock`

原因：在React中数组遍历返回元素或组件时需加上key属性作为唯一标识

解决方法：写成

var arr=[1,2,3]
arr.map(function(x,i){
            return (<div key=i></div>);
        })

4在render()函数中返回时这样写：

render(){
      return  <div></div>
              <div></div>
              <div></div>
             }

报错：Adjacent JSX elements must be wrapped in an enclosing tag (75:8)

原因：render()函数中返回的所有元素需要包裹在一个外部元素里面

解决方法：可改写为：

render(){
      return  <section>
                    <div></div>
                    <div></div>
                    <div></div>
              </section>
         }

最后一点---不能写成：（return语句和返回元素不在同一行会被解析器视为返回null导致错误)

render(){
      return  
                 <section>
                    <div></div>
                    <div></div>
                    <div></div>
                 </section>
             }