jsx语法的几个注意点

绝地灬酷狼 2022-12-11 12:24 220阅读 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 条评论，220人围观）

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

相关阅读

相关 Vue路由使用的几个注意点

前言在使用vue的路由的时候，是有几个需要注意的点，下面一一说明组件的分类组件分为两种：路由组件和一般组件路由组件是注册到路由器中，并且是由路由相关标签

以你之姓@/ 2023年09月23日 23:09/ 0 赞/ 65 阅读

相关 jsx语法的几个注意点

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

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

相关网页优化性能的几个基本注意点

1.清理HTML文档 HTML，即超文本标记语言，几乎是所有网站的支柱。HTML为页面带来了标题，子标题，列表和其他的一些文档结构的格式。在最近新的HTML5中，甚

柔光的暖阳◎/ 2022年06月17日 00:48/ 0 赞/ 254 阅读

相关语法分析注意点

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

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

相关 react中的JSX注意点

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

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

相关避免NullPointerException的几个注意点

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

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

相关 Markdown语法的几个注意点

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

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

相关 JSX语法简介

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

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

相关 react jsx语法

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

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

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

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

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