react第一天

最新推荐文章于 2022-02-23 23:27:53 发布

Simple_IDE

最新推荐文章于 2022-02-23 23:27:53 发布

阅读量100

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/simple5960/article/details/110477916

版权

react 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

ReactDOM提供了与浏览器交互的DOM，功能如DOM渲染

ReactDOM.render(element,container[,callback])
//element是要渲染的内容
//container是要渲染内容存在的容器
//callback是渲染成功后的回调函数

如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../EXP/JSlib/react/react.js"></script>
    <script src="../../EXP/JSlib/react/react-dom.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>

    ReactDOM.render(
        "hello world",
        document.querySelector("#app")
    )

</script>
</html>

就会在div中渲染出hello world
在这里插入图片描述
当然，还可以通过以下方式创建元素

 ReactDOM.render(
        /*
        React.createElement(type,props,children)
        */
        React.createElement("div",{id:"father"},"i am the father",
        React.createElement("p",{},"i am the son")
        ),
        document.querySelector("#app")
    )

不过上面的创建过程太过于繁琐复杂。推荐使用下面的JSX->javscript+XML

注意，要使用JSX需要加载Babel.js文件,bebel负责把JSX编译成浏览器能够识别的代码。

还需要在script标签加上 <script type="text/babel">
如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../EXP/JSlib/react/react.js"></script>
    <script src="../../EXP/JSlib/react/react-dom.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
<script type="text/babel">

ReactDOM.render(
   <header>
        <h1>hello JSX</h1>
   </header>,
    document.querySelector("#app")
)

</script>
</html>

react中的插值表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../EXP/JSlib/react/react.js"></script>
    <script src="../../EXP/JSlib/react/react-dom.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="app">
        
    </div>
    <input type="text" id="text">
</body>
<script type="text/babel">

    let text=document.querySelector("#text")
    text.oninput=()=>{
        ReactDOM.render(
            <div>
                插值表达式:{text.value}
            </div>,
            document.querySelector("#app")
        )
    }
</script>
</html>

或者

 let fn=()=>{
        return (
            <div>firts block
                <div>second block</div>
                </div>
            
        )
    }
 
        ReactDOM.render(
            <div>
                {fn()}
            </div>,
            document.querySelector("#app")
        )

注意：插值表示中不能写入布尔值，对象都。
数字、字符串会原样输出
只能写入数组，JSX不能写循环语句for while
同时JSX中只能有一个顶层元素
JSX中的class只能写成className

如下

let arr=[1,2,3,4,5,6,7,8,9]
        ReactDOM.render(
            <div>
                {arr.map((item,index)=><p key={index}>{item}</p>)}
            </div>,
            document.querySelector("#app")
        )

如果是对象的话就需要将对象转换成数组再输出
如下

 let obj={
          a:1,
          b:2,
          c:3,
          d:4
       }
        ReactDOM.render(
            <div>
                {Object.keys(obj).map((item,index)=>{
                    return <p key={index}>item's key-{item}</p>
                })}
                {Object.values(obj).map((item,index)=>{
                    return <p key={index}>item's value-{item}</p>
                })}
            </div>,
            document.querySelector("#app")
        )

Simple_IDE

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react第一天

ReactDOM提供了与浏览器交互的DOM，功能如DOM渲染ReactDOM.render(element,container[,callback])//element是要渲染的内容//container是要渲染内容存在的容器//callback是渲染成功后的回调函数如<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="view
复制链接

扫一扫