React学习笔记04-JSX语法知识补充

最新推荐文章于 2023-10-17 11:03:57 发布
最新推荐文章于 2023-10-17 11:03:57 发布
阅读量166 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45640411/article/details/116696559
版权

1、JSX语句块当中写注释。
在这里插入图片描述
2、引入css文件。css中的类在JSX语句块当中要写成className。
在这里插入图片描述
3、如果input框要实现输入html代码，并点击提交时在下面也显示html代码，我们只需要这样做。
在这里插入图片描述
4、html中有个label标签，它有一个属性叫做for，但是这会和JSX语法中的循环for冲突，所以JSX代码中的label标签的for属性现在变成了htmlFor。
在这里插入图片描述

Ericjin1022
关注
React学习笔记-第二篇
09-07
以下是我对React学习的一些心得和总结，希望能为大家提供一些帮助。 一、React简介 React是由Facebook推出的一款用于构建用户界面的JavaScript库。它采用组件化的开发模式，使得开发者可以高效地构建可复用的UI...
JSX的一些语法细节
weixin_43342105的博客
07-12 323
文章目录注释的两种写法在用css类选择器时，用className代替classdangerouslySetInnerHTML转义功能label的for标签要用htmlfor代替 注释的两种写法 {/* 下面是一个input框*/} { //这也是一个注释 } 注意下面一种写法的后面一个括号必须换换行 在用css类选择器时，用className代替class 这是因为js会把class解成类名，如果直接用class的话会报如下错误 应该这样写 <input class
4.jsx语法有关规则
qq_24871849的博客
12-17 311
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jsx语法规则</title> <style> .title{ background-color: orange; width: 200px; } </style> </head> <body> <!-- 准备好一个
react中 JSX介绍-基本使用
weixin_58207509的博客
11-05 664
JSX是什么 JSX：是 JavaScript XML的缩写。 在 JS 代码中书写 XML 结构 注意：JSX 不是标准的 JS 语法，是 JS 的语法扩展。脚手架中内置了 @babel/plugin-transform-react-jsx 包，用来解析该语法。 React用它来创建 UI（HTML）结构 jsx示例 // 导入react和react-dom import React from 'react' import ReactDOM from 'react
JavaScript 获取 input 输入框内容的几种方法
每天都想吃好吃的
06-29 1万+
```例如： let inputText = document.getElementsByTagName("input")[0].value;```例如：let inputText = document.getElementsByName("input")[0].value;```例如：let inputText = document.querySelector("#input").value;````例如：let form = document.forms[0];
玩转代码| Vue 中 JSX 的特性，这一篇讲的明明白白
Jum的博客
10-17 1741
目录什么时候使用JSXJSX在Vue2中的基本使用配置文本插值条件与循环渲染属性绑定事件绑定v-show与v-model插槽使用自定义组件在method里返回JSXJSX是一种Javascript的语法扩展，即具备了的全部功能，同时又兼具的语义化和直观性。它可以让我们在JS中写模板语法： 上面这段代码既不是 HTML 也不是字符串，被称之为 JSX，是 JavaScript 的扩展语法。JSX 可能会使人联想到模板语法，但是它具备 Javascript 的完全编程能力。当开始写一个只能通过 prop
React学习笔记-第一篇
最新发布
09-07
以下是我对React学习的一些心得和总结，希望能为大家提供一些帮助。 一、React简介 React是由Facebook推出的一款用于构建用户界面的JavaScript库。它采用组件化的开发模式，使得开发者可以高效地构建可复用的UI...
react 学习笔记
11-16
React 学习笔记 React 是一个流行的前端框架，用于构建用户界面。学习 React 需要掌握其核心概念，包括组件生命周期、状态管理、事件处理等。本节笔记将记录 React 学习过程中的关键知识点。 一、React 组件生命...
React学习笔记之事件处理（二）
12-09
在JSX语法中，你传递一个fucntion作为时间处理器，而不是一个string 举个例子： <button onClick={activateLasers}> Activate Lasers </button> 而且如果你想拿到事件对象event，这个对象是React...
React框架er-paper-mas开发笔记
06-11
React的JSX语法是JavaScript和HTML的融合，使得编写UI更加直观。JSX允许我们在JavaScript中写类似于HTML的结构，但在编译时会转换为普通的JavaScript。例如，`<div>Hello, {this.props.name}!</div>`会生成一个React...
jsx的语法规范
weixin_44862325的博客
04-18 217
1.标签必须要闭合 <input /> 2.最外层只能有一个根元素 3.className <div className={flag?'red':''}></div> 4.style={{}} <div style={{backgroundColor:'red'}}></div> 5.onClick &lt...
2022-07-25 工作记录--React/JS-input输入框 / textarea文本框输入字数限制以及字数显示
weixin_48850734的博客
07-25 4228
React/JS-textarea文本框输入字数限制以及字数显示
day02--JSX的基本学习
weixin_44804827的博客
05-09 239
1.1.jsx的标签首先需要进行首字母大写的区分，大写的是自定义组件的写法1.2.标签必须是闭合的，例如在JSX中就是非法的写法会报错1.3.每段JSX都只能有一个根节点类似于vue中的fragment。
javascript学习之＜input＞ 元素属性和方法
白话机器学习
08-04 3125
input>元素主要用于表单组件，它继承了 HTMLInputElement 接口。
4、JSX 基本语法规则
大家好，我是+V
09-11 450
JSX 全称是 JavaScript XML。react 定义的一种类似于 xml 的 js 拓展语法：js + xml。本质是 React。createElement(component, props, … children) 的语法糖。作用：- 写法：var ele = 我是𝒆𝒅. - 他不是字符串，也不是 HTML/XML 标签- 他最终产生的就是一个 js 对象标签名任意：html 标签或者是其他标签。
JSX，Html语法需注意的部分
z69183787的专栏
03-15 2477
在JSX中设置style属性与其它的属性不同，  在JSX中我们通常是通过 {} 的方式插入值，但是设置style属性需要{{ }} ,否则系统会报错。 import classes form './myCss.css' {/*JSX 中的注释方式*/} {/*style属性必须使用 {{}} */} div style={{width: 20px; height=30px}}>
react中获取input输入框内容的两种方法
尘生杜若
03-04 3万+
一.通过event对象信息的方式 &lt;input onChange={(e)=&gt;this.inputChange(e)}/&gt; &lt;button onClick={()=&gt;this.getInputValue} &gt;获取input的值&lt;/button&gt; inputChange(e){ alert(e.target.value) this.setStat...
react 获取input 输入框的值
热门推荐
永远都是Pink
08-03 6万+
react 获取input 输入框的值 第一种方式 非受控组件获取 第二种方式 受控组件获取 非受控组件获取 ref import React , {Component} from 'react'; export default class App extends Component{ search(){ const inpVal = this.input...
JSX语法中的标签属性注意事项
无名大强在前端
09-27 4928
JSX语法中的标签属性注意事项
React-Native学习笔记：组件与JSX语法解析
这个文档是作者在学习React-Native过程中整理的个人笔记，主要涵盖了React的基础语法和React-Native的一些核心概念。 #### React基础知识 React是一种用于构建用户界面的JavaScript库，它的核心理念是组件化。以下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值