react入门指南（四）JSX

一 、JSX简介

jsx是一个 JavaScript 的语法扩展，可以理解为js的一个新的数据类型，类XML（JSON前身）语法，出现在js当中，文件为xx.js|xx.jsx

二 、语法要求

• 标签要闭合
• 元素必须要有一个顶层元素
• 变量首字母大写代表组件，小写对应是js数据类型
• 属性名，小驼峰命名 <xx tabIndex="2">
• 动态的属性值
• class名 须写成className=‘XXX’

1.标签要闭合

在JSX语法内的标签,一定要闭合
单标签形如: <br/> <img src="" alt=""/> <input />
双标签：<ScrollView></ScrollView>

<div></div>

2.元素必须要有一个顶层元素

在你render出的标签时，要有一个标签吧其余标签包裹住
正确实例：

ReactDOM.render(
      <div>
        <h1>jsx</h1>
        <div></div>
        <h2>h2<h2>
    </div>
    ,
    document.getElementById('root')
);

如果没有顶层元素包裹，可能会报下列错误
Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

3.变量首字母大写代表组件，小写对应是js数据类型

当引用的组件调用时必须首字母大写，比如说
我调用
里面的checkbox，通过es6语法 import Checkbox from ‘@components/checkbox/index’
引入后，

ReactDOM.render(
      <div>
        <Checkbox>
    </div>
    ,
    document.getElementById('root')
);

引入标签大写

4.属性名，小驼峰命名 <xx tabIndex="2">

5.动态的属性值

<img src={getImgsrc()} alt="" />

6class名 须写成className=‘XXX’

由于class关键字表示类，所以标签的类名不能写为class=‘xxx’，须写成className=‘XXX’

三、条件判断语句在jsx中的书写

1.三元表达式

{
    a ? <span>a为真的时候渲染</span> : <span>a为假的时候渲染</span>
}

2.判断语句

{
	true && <span>这个会渲染</span>
	false && <span>这个不会渲染</span>
}

3.在return之外定义属性判断，在return内渲染

上面我们说了三元表达式，但是在有些场景下，三元表达式往往并不能满足需求，React建议的方式是在JS代码中使用if表达式。例如

var a;
if (true) {
  a = <div>true</div>;
} else {
  a = <div>false</div>;
}

return (
  <nav>
    <Home />
    {a}
  </nav>
);

四、注释写法

单行注释 {/* <div></div> */}
多行注释

{/* <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div> */}

五、JSX事件绑定

和原生HTML定义事件的唯一区别就是JSX采用驼峰写法来描述事件名称，大括号中仍然是标准的JavaScript表达式，返回一个事件处理函数。例如，给一个按钮绑定点击事件：

<button onClick={this.checkAndSubmit.bind(this)}>Submit</button>

事实上，React并不会真正的绑定事件到每一个具体的元素上，而是采用事件代理的模式：在根节点document上为每种事件添加唯一的Listener，然后通过事件的target找到真实的触发元素。这样从触发元素到顶层节点之间的所有节点如果有绑定这个事件，React都会触发对应的事件处理函数。这就是所谓的React模拟事件系统。

行内样式写法

在设置标签style属性的时候，要注意，我们是将一个描述style的对象以JavaScipt表达式的形式传入。因此应该有2层大括号。例如：

<div style={{color:'red', margin:'10px auto'}}></div>

部分补充参考https://blog.csdn.net/xiangzhihong8/article/details/70148447?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522159418785619724848317135%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=159418785619724848317135&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allfirst_rank_ecpm_v3~pc_rank_v3-4-70148447.pc_ecpm_v3_pc_rank_v3&utm_term=jsx%E4%B8%8E%E7%B1%BB