react学习之jsx的使用

Posted 2020-12-12 一起来学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()