jsx语法的几个注意点

绝地灬酷狼 2022-12-11 12:24 197阅读 0赞

## 1. \{\}里面放的内容 ##

*  必须有返回值
 *  函数(当成组件可以)
 *  对象不可以 (例外: 如果引入的是 style 样式, 可以)
 *  数组
 *  普通数据类型可以 null, boolean, undefined
 *  可以运算, 字符串拼接
 *  不可以 if else, 但是可以三元运算

let name = "杰克";
    
    <div>{ name}</div>   //ok
    --------------------------
    
    function Jieke(){ 
    	return "jieke"
    }
    
    <div>{ Jieke}</div>   //报错
    <Jieke />	//组件形式 ok
    
    --------------------------
    
    let name = { username: "杰克"}
    
    <div>{ name.username}</div>   //ok
    <div>{ name}</div>   //报错
    
    --------------------------	
    
    let name = [1,2,3]
    
    <div>{ name}</div>   //ok 打印出 123
    
    let name = [1,{ },3]
    
    <div>{ name}</div>   //报错
    
    --------------------------	
    
    <div style={ color:"red"}>{ name}</div>   //报错
    但
    let style={ color:"red"}
    ReactDOM.render(
    	<div style={ style}>{ name}</div>  //ok
    )

*

import React from 'react';   //解释 jsx 语法, 并转译虚拟 dom 对象(babel-preset-react)
    import ReactDOM from 'react-dom'; //将虚拟 dom 的对象渲染到页面中
    
    // render 的三个参数: jsx 元素, 挂载点, callback
    
    let obj = <div>hello</div>
    
    ReactDOM.render(
    	//第一个参数:jsx 元素
    	obj, // 所以 jsx 可以是个jsx对象
      	//第二个参数:挂载点
      	document.getElementById('app'),
      	//第三个参数:callback
      	() => {  console.log('good') }
    )

发表评论取消回复

表情：

评论列表（有 0 条评论，197人围观）

还没有评论，来说两句吧...

相关阅读

相关 JSX语法规则

> jsx语法规则： > 1.定义虚拟DOM时，不要写引号。 > 2.标签中混入JS表达式时要用\{\}。 > 3.样式的类名指定不要用class，要用classN

冷不防/ 2023年01月04日 14:32/ 0 赞/ 165 阅读

相关 jsx语法的几个注意点

1. \{\}里面放的内容必须有返回值函数(当成组件可以) 对象不可以 (例外: 如果引入的是 style 样式, 可以) 数组普通数

绝地灬酷狼/ 2022年12月11日 12:24/ 0 赞/ 198 阅读

相关语法分析注意点

一棵分析树可对应多个推导序列，但是分析树和最左（右）推导序列之间具有一一对应关系如果一个文法中存在某个句子有两棵分析树,那么该句子是二义性的。对于任意一个上下文无

男娘i/ 2022年06月14日 06:19/ 0 赞/ 254 阅读

相关 react中的JSX注意点

定义组件时，最外层必须有一个标签进行包裹。例如： / 报错 / const component1 = <div>123</div><

本是古典何须时尚/ 2022年05月23日 10:35/ 0 赞/ 195 阅读

相关避免NullPointerException的几个注意点

字符串使用equals()方法时将字符串放在前面 ![70][] 检查方法中的参数是否为空 ![70 1][] 转换成String字符串的时候使用Strin

绝地灬酷狼/ 2022年05月22日 09:22/ 0 赞/ 223 阅读

相关 Markdown语法的几个注意点

Markdown语法的几个注意点 1.表格的制作首先是表格的绘制，效果如下： <table> <thead> <tr> <th>Heading

叁歲伎倆/ 2022年05月15日 10:19/ 0 赞/ 348 阅读

相关 JSX语法使用

深入了解JSX 什么是JSX？事实上JSX就是React.createElement()方法的语法糖。 JSX的优点： 1. JSX 执行更快，因为它在编译

╰半橙微兮°/ 2022年05月10日 04:34/ 0 赞/ 279 阅读

相关 JSX语法简介

React的核心机制之一就是可以在内存中创建虚拟的DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。 JSX简介 JSX就是Javascrip

深碍√TFBOYSˉ_/ 2022年04月24日 06:38/ 0 赞/ 244 阅读

相关 react jsx语法

jsx语法 (1)遇到{}按照js语法解析,无<>时也按照js语法解析 (2)遇到<>按照html语法解析 (3)遍历时,每一个

ゝ一世哀愁。/ 2021年07月24日 15:17/ 0 赞/ 486 阅读

相关 JSX，Html语法需注意的部分

在JSX中设置style属性与其它的属性不同，在JSX中我们通常是通过 `{}` 的方式插入值，但是设置style属性需要`{ { }}` ,否则系统会报错。

╰半夏微凉°/ 2021年06月24日 14:37/ 0 赞/ 388 阅读