react学习之jsx的使用
2023-09-14 09:06:35 时间
import React from "react";
import ReactDOM from "react-dom"
import './index.css';
import * as serviceWorker from './serviceWorker';
//jsx 需要符合xml规范
//如果下一行代码出现:[)+-/,那么必须末尾加分号,否则代码不用加
const div_text = "这是一个div" //在标签中通过{}引用
const flag = true
const arrstr = ["python", "rust", "java", "go"]
console.log("div_text", div_text);
const mydiv = <div className="mydiv">{flag ? div_text : "条件为假"}</div>
//forEach 没有返回值所以我们用map
// const name_arr = arrstr.map(item => {
// return <p>{item}</p>
// })
//如果需要保持状态就需要属性key.
//在jsx中class 替换为className,for 替换htmlFor。
ReactDOM.render(
<div>
{mydiv}
{arrstr.map(item => <p key={item} >{item}</p>)}
</div>, document.getElementById("root"))
serviceWorker.unregister()
相关文章
- Java架构师之路(参考这个学习吧)
- React Native学习笔记(1) 环境配置,项目结构,开发环境结构
- React课程学习
- linux shell 脚本攻略学习17--正则表达式入门
- 前端学习 -- Css -- 字体分类
- 前端学习 -- Xhtml语法规范
- HTML span标签学习笔记
- React学习笔记
- Python编程语言学习:python语言中快速查询python自带模块&函数的用法及其属性方法、如何查询某个函数&关键词的用法、输出一个类或者实例化对象的所有属性和方法名之详细攻略
- TF学习——Tensorflow框架之基础概念、设计思路、常用方法之详细攻略
- React Native学习笔记(三)—— 样式、布局与核心组件
- 【React Native开发】React Native配置执行官方样例-刚開始学习的人的福音(8)
- 染色质可及性数据学习
- 15. OD-去除程序最后退出时弹出的注册模态对话框,eXeScope、Resource_Hacker工具的学习