首页 > Web开发 > 详细

react学习之jsx的使用

时间:2020-06-25 18:31:23      阅读:45      评论:0      收藏:0      [点我收藏+]
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的使用

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!