React插值表达式

React 插值表达式

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!--    相当于react.js  -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!--    相当于react-dom.js  -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.js"></script>
    <!--    相当于JSX  -->

<div id="root"></div>
    <script>
        //各种数据的插值状态 let data = "天气还不错"; //原样输出 //let data = 1; 原样输出 //let data = false;\ 不输出 //let data = undefined; 不输出 //let data = null 不输出 let data = ["内容1","内容2","内容三"]; //去掉，原样输出
    </script>
    <script>
        //对象不能直接添加
        // let data = {
        //     name:"白鼬鼬",
        //     age:18
        // };
        //需要这样来写
        // {data.name}{data.age}
    </script>
    <script type="text/babel">
        let data = { name:"白鼬鼬", age:18 }; ReactDOM.render(
        < header>
            < h1> hello {data.name}{data.age}
                < /h1>
                    < p> l里用Jsx来渲染
                        < /p>
                            < / header> , document.querySelector("#root"), () => { console.log("渲染成功") } )
    </script>

React 条件输出

 <!-- //条件输出 -->
    <!-- ? :  类似  if...else
    ||   类似   if(!)   取反
    &&   类似    if() -->
    <script type="text/babel">

        let data = { name:"白鼬鼬", age:18 }; ReactDOM.render(
        < header>
            < h1> hello {false ? "成立" : "不成立"}
                < /h1>
                    < p> {true||l里用Jsx来渲染}
                        < /p>
                            <div>{true&&"正确"}</div>
                            < / header> , document.querySelector("#root"), () => {console.log("渲染成功")} )
    </script>

React 列表循环

<!-- v-for -->
    <!-- function taData(){ let arr = []; }   存放内容 -->
    <script type="text/babel">

        let data = ["内容1","内容2","内容三","内容似"]; function taData(){ let arr = []; data.forEach(item=>{ arr.push(
        <li>{item}</li>) }); return arr; } ReactDOM.render(
        < header>
            {taData() }
            < / header> , document.querySelector("#root"), () => {console.log("渲染成功")} )
    </script>