React：JSX语法

概述

在index.js文件中App变量中保存的数据渲染到root关联的根元素中了

但是js文件中应该写js语法,js语法变量中只能保存:6种基本数据和2种引用数据

let App=<div>666</div> 保存的是一个标签这种语法就是JSX语法

JSX语法就是一种插值语法它经过打包工具编译后本质上还是JS语法

JSX语法规则：

1、定义虚拟DOM时，不要写引号

2、标签中混入JS表达式时要用{}

3、样式的类名指定不要用class，要用className

4、内联样式，要用style={{key:value}}的形式写

5、只能有一个根标签

6、标签必须闭合

7、标签首字母‘

7.1若小写字母开头，则将改标签转为 html中的同名元素，若html中无该标签对应的同名元素，则报错。

7.2若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

JSX:

1.遇到了<>就会解析为标签:

1.1如果是html语法标准的标签就会直接解析为同名元素 <nav/> <div/> <article/>

1.2如果是其它标签需要特别解析--组件<App>

1.3 <App/> 这个代码的意义决定了你能不能真正入门react框架:

<App titel="200"/> ===> new App(200)

ReactDOM.render(<h1>hello react</h1>, document.getElementById('root')); //render函数:

//参数二,获取插入到界面的哪个容器

//参数一, 是一个标签//标签也可以作为函数的参数吗?

JSX语法：JavaScript + XML语法(HTML) 解读jsx语法：在react中遇到<>按照HTML语法解析，遇到{}按照JavaScript解析

1、JSX介绍

全称: JavaScript XML， React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

我们不需要一定使用 JSX，但它有以下优点：

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。

作用: 用来创建react虚拟DOM(元素)对象
- var ele = <h1>Hello JSX!</h1>;
- 注意1: 它不是字符串, 也不是HTML/XML标签
- 注意2: 它最终产生的就是一个JS对象
标签名任意: HTML标签或其它标签
标签属性任意: HTML标签属性或其它
基本语法规则
- 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
- 遇到以 { 开头的代码，以JS的语法解析: 标签中的js代码必须用{ }包含
babel.js的作用
- 浏览器的js引擎是不能直接解析JSX语法代码的, 需要babel转译为纯JS的代码才能运行
- 只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

2、使用 JSX

JSX 看起来类似 HTML ，我们可以看以下实例:

html文件：

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

js文件：

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root')
);

注意：代码中能够嵌套多个 HTML 标签，但需要使用一个标签元素包裹它

错误例子：

ReactDOM.render(
  <h1>这是错误的例子</h1>
  <span>假设这里是标题下面的内容</span>,
  document.getElementById("example")
);

正确例子：

ReactDOM.render(
  <section>
    <h1>这是正确的例子</h1>
    <span>假设这里是标题下面的内容</span>
  </section>,
  document.getElementById("example")
);

3、样式

React 推荐使用内联样式。React 会在指定元素数字后自动添加 px 。

var myStyle = {
    fontSize: 100,  //等价于fontSize: '100px',
    color: '#00ff00'
};
ReactDOM.render(
    <h1 style = {myStyle}>我是标题</h1>,
    document.getElementById('example')
);

4、注释

注释需要写在花括号中，需要注意的是：

在标签内部的注释需要花括号
在标签外的的注释不能使用花括号

ReactDOM.render(
    /*标签外部的注释 */
    <h1>我是标题 {/*标签内部的注释*/}</h1>,
    document.getElementById('example')
);

6、JavaScript 表达式

我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。实例如下：

var a=20
function fn(){return "hello"}
ReactDOM.render(
    <div>
      <h1>{a+1}</h1>
      <h3>{fn()}</h3>
    </div>,
    document.getElementById('example')
);

7、条件渲染

三目运算符

在 JSX 内部不能使用 if else 语句，但可以使用 三元运算 表达式来替代。

var i = 10;
ReactDOM.render(
    <div>
      <h1>{i == 1 ? 'True!' : 'False'}</h1>
      {i > 0 ? <div className="box"></div> : '' }  
    </div>,
    document.getElementById('example')
);

可以在JSX外部使用if语句

var i = 10;
if(i > 0){ //使用if语句的好处是：如果条件不满足且不需要渲染组件时不需要写else
    box = <div className="box"></div>;
}
ReactDOM.render(
    <div>
      { box }
    </div>,
    document.getElementById('example')
);

（面试）去掉三目运算符的否则： &&

{i > 0 && <div className="box"></div>}

8、数组

JSX 允许在模板中插入数组，数组会自动展开所有成员

var arr = [
  <h1>HTML</h1>,
  <h2>CSS</h2>
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

9、列表渲染

通过数组的map函数

var aGoods=[
    {id:1,title:"潮流女装"},
    {id:2,title:"品牌男装"},
    {id:3,title:"手机电脑"}
]

<ul>  
    {   
        aGoods.map((item,index)=>{   
            return ( //通过return返回多个li元素             
                <li key={index}>{item.title}</li> 
            )        
        })    
    }
</ul>

posted on 2022-10-12 22:32 香香鲲阅读(231) 评论(0) 编辑收藏举报