码迷,mamicode.com
首页 > Web开发 > 详细

react学习之jsx的使用

时间:2020-06-25 19:17:10      阅读:57      评论:0      收藏:0      [点我收藏+]

标签:规范   reac   html   code   service   root   reg   rust   python   

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()

react学习之jsx的使用

标签:规范   reac   html   code   service   root   reg   rust   python   

原文地址:https://www.cnblogs.com/c-x-a/p/13192439.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!