jsx基本使用

最新推荐文章于 2024-08-17 21:49:37 发布

不想努力的迪迪

最新推荐文章于 2024-08-17 21:49:37 发布

阅读量97

点赞数

文章标签： javascript react.js 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_48341937/article/details/129079809

版权

本文介绍了如何使用React创建虚拟DOM，包括createElement方法和JSX语法。展示了数据渲染、属性绑定、条件渲染（三元运算符和函数方式）以及列表渲染的基本用法，通过示例代码详细解释了React组件的渲染流程。

摘要由CSDN通过智能技术生成

import React from "react";
import ReactDOM from  'react-dom'

创建虚拟DOM
const span=React.createElement('div',null,'我是一个span')
const div=React.createElement('span',null,'我是一个div')

使用jsx创建虚拟DOM
const App=(
    <div>

    <span>
        我是一个span标签
    </span>
    </div>
)
// ReactDOM.render(<div>app</div>,document.getElementById('root'))

const msg='hello'
const flag=false
function show(){
    if(flag){
        return '显示'
    }else{
        return '隐藏'
    }
}

const list=['apple','banana','watermaton','orange']
const App=(
    <div>
        <h1>1.数据渲染</h1>
        {msg}
        <h1>2.属性绑定</h1>
          <h1 title={msg}>属性绑定</h1>
        <h1>3.条件渲染</h1>
        <h2>三元运算符</h2>
        {flag?'显示':'隐藏'}
          <h1>4.使用函数写法</h1>
        {show()}
        <h1>5.列表渲染</h1>
        {
            list.map(item=>{
                return(
                    <p key={item}>
                        {item}
                    </p>
                )


            })
        }
    </div>
)
ReactDOM.render(App,document.getElementById('root'))