zoukankan      html  css  js  c++  java
  • 【03】React中JSX语法

    jsx特点:
    a、jsx可以直接创建组件,直接写组件的html
    b、有且仅有一个父级
    c、添加class名时,由class变为 className
    d、label标签 里的for 属性变为 htmlFor
    e、表达式 { } ,写变量
    f、循环可以直接写在{ } 里面,完全是js的形式写法

    jsxStudy.js

    //引入 react
    import React,{Component} from 'react';
    //创建组件
    class JsxStudy extends Component{
        constructor(...props){
            super(...props)
            this.str = '梦中不知岁已老,朦胧人间谁登高。'
            this.numbers = [10,20,30]
        }
        //有且仅有一个父级
        render(){
            return(
                <div>
                    {/*添加class名时,由class变为className*/}
                    <p className="active">风飘飘,雪遥遥。</p>
                    {/*变量写在 {} 里*/}
                    <p>{this.str}</p>
                    {/*label标签 里的for 属性变为 htmlFor*/}
                    <label htmlFor="aaa">点我也能选中</label>
                    <input type="checkbox" id="aaa"  />
                    {/*循环可以直接写在{ }里面,完全是js的形式写法*/}
                    <ul>
                        {
                            this.numbers.map((val)=>{
                                return <li key={val}>{val}</li>
                            })
                        }
                    </ul>
                </div>
            )
        }
    }
    //导出组件
    export default JsxStudy;

    效果:

  • 相关阅读:
    六、mysql字段类型选择
    五、mysql存储引擎
    四、mysql内置函数
    三、mysql运算符
    二、mysql数据类型
    一、mysql使用入门
    拉链法解决Hash节点冲突问题
    CSS3样式
    CSS样式表
    HTML的表格、表单和框架
  • 原文地址:https://www.cnblogs.com/MaShuai666/p/12482975.html
Copyright © 2011-2022 走看看