jsx demo

多层嵌套 []   h->createElement


<script type="text/jsx"> export default {   name: "demo",   render(h) {     return h(       "el-row",       {         props: {           level: 1,           value: this.value,         },         attrs: {           id: "foo",                   },         on: {                   },       },       [         h("div", { class: "test" }, [           h("div", { class: "test" }, [             h("div", { class: "test" }, [h("div", { class: "test" }, 7777)]),             h("div", { class: "test" }, 666),             h("div", { class: "test" }, 666),           ]),           h("div", { class: "test" }, 666),           h("div", { class: "test" }, 666),         ]),       ]     );   },   data() {     return {           };   },   methods: {        }, }; </script>  
 


<script type="text/jsx">
export default {
  name: "demo",
  render(h) {
    return h(
      "el-select",
      {
        props: {
          level: 1,
          value: this.value,
        },
        attrs: {
          id: "foo",
          placeholder: "请选择",
        },
        on: {
    change: this.clickHandler
  },
      },
      [
        this.options.map((v) => {
          return h("el-option", {
            props: {
              value: v.value,
              label: v.label,
            },
          });
        }),

        " world!",
      ],[
          " world!",
      ]
    );
  },
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "选项5",
    };
  },
  methods: {
    //发送通知
    clickHandler(e){
      console.log(e);
      this.value=e
    }
    
  },
};
</script>
 

 

 

<script type="text/jsx">
 
  
    export default {
        name: "demo",
        render() {
            return (

                <div class="scroll-box">
                 <div>
            {this.list.map((v)=>{
              return <p>{v}</p>
            })}
          </div>
                <el-button>55</el-button>
                    <a-divider>按钮使用</a-divider>
                    <a-button type="primary">Button</a-button>
                    <a-divider>图标使用</a-divider>
                    <a-icon type="dribbble" style="color:red" spin/>
 
                    <a-divider>栅格布局</a-divider>
                    <a-row>
                        <a-col xs={4} md={8}>这是第1个</a-col>
                        <a-col xs={4} md={8}>这是第2个</a-col>
                        <a-col xs={4} md={8}>这是第3个</a-col>
 
                    </a-row>
                    <a-divider>固钉</a-divider>
                    <a-affix>固定</a-affix>
                    <a-divider>下拉菜单</a-divider>
                    <a-dropdown-button onClick={this.dropDownClick.bind(this)} trigger={['contextmenu']}> 右键显示
                        <a-menu slot="overlay">
                            <a-menu-item key="1" onClick={this.dropDownClick.bind(this, 1)}>
                                <a-icon type="user"/>
                                1st menu item
                            </a-menu-item>
                            <a-menu-item key="2" onClick={this.dropDownClick.bind(this, 2)}>
                                <a-icon type="user"/>
                                2nd menu item
                            </a-menu-item>
                            <a-menu-item key="3" onClick={this.dropDownClick.bind(this, 3)}>
                                <a-icon type="user"/>
                                3rd item
                            </a-menu-item>
                        </a-menu>
                    </a-dropdown-button>
                    <a-dropdown-button onClick={this.dropDownClick.bind(this)}> 悬浮显示
                        <a-menu slot="overlay">
                            <a-menu-item key="1" onClick={this.dropDownClick.bind(this, 1)}>
                                <a-icon type="user"/>
                                1st menu item
                            </a-menu-item>
                            <a-menu-item key="2" onClick={this.dropDownClick.bind(this, 2)}>
                                <a-icon type="user"/>
                                2nd menu item
                            </a-menu-item>
                            <a-menu-item key="3" onClick={this.dropDownClick.bind(this, 3)}>
                                <a-icon type="user"/>
                                3rd item
                            </a-menu-item>
                        </a-menu>
                    </a-dropdown-button>
                    <a-dropdown-button onClick={this.dropDownClick.bind(this)} trigger={['click']}> 点击显示
                        <a-menu slot="overlay">
                            <a-menu-item key="1" onClick={this.dropDownClick.bind(this, 1)}>
                                <a-icon type="user"/>
                                1st menu item
                            </a-menu-item>
                            <a-menu-item key="2" onClick={this.dropDownClick.bind(this, 2)}>
                                <a-icon type="user"/>
                                2nd menu item
                            </a-menu-item>
                            <a-menu-item key="3" onClick={this.dropDownClick.bind(this, 3)}>
                                <a-icon type="user"/>
                                3rd item
                            </a-menu-item>
                        </a-menu>
                    </a-dropdown-button>
                    <a-divider>锚点菜单</a-divider>
                    <a-dropdown>
                        <a className="ant-dropdown-link" href="#">
                            悬浮预览菜单 <a-icon type="down"/>
                        </a>
                        <a-menu slot="overlay">
                            <a-menu-item>
                                <a href="javascript:;">1st menu item</a>
                            </a-menu-item>
                            <a-menu-item>
                                <a href="javascript:;">2nd menu item</a>
                            </a-menu-item>
                            <a-menu-item>
                                <a href="javascript:;">3rd menu item</a>
                            </a-menu-item>
                        </a-menu>
                    </a-dropdown>
 
                    <a-divider>侧边栏</a-divider>
                    <a-button onClick={this.controllerDrawer.bind(this)}>侧边栏控制</a-button>
                    <a-drawer
 
                        title="我是侧边标题"
                        placement="right"
                        closable={true}
                        onClose={this.controllerDrawer.bind(this)}
                        visible={this.showDrawer}>
                        <div>这里是侧边栏内部内容!</div>
                    </a-drawer>
 
                    <a-divider>全局提示</a-divider>
 
                    {
 
                        [0, 1, 2, 3].map((row, idx) => {
                            return (
                                <a-button
                                    onClick={this.openGlobalTips.bind(this, row)}>{this.globalTips[row]}</a-button>
                            )
                        })
                    }
                    <a-divider>模态框</a-divider>
                    <a-button onClick={this.basic_modal_open.bind(this)}>打开基本模态框</a-button>
 
                    <a-modal
                        confirmLoading={this.modal_loading_flag}
                        title="Basic Modal"
                        v-model={this.basic_modal_flag}
                        onOk={this.basic_modal_ok.bind(this)}
                    >
                        <p>Some contents...</p>
                        <p>Some contents...</p>
                        <p>Some contents...</p>
                    </a-modal>
 
                    <a-divider>全局通知</a-divider>
                    <a-button onClick={this.submit_nitify.bind(this)}>通知1</a-button>
                    <a-divider>气泡确认</a-divider>
                    <a-popconfirm title="你确定吗?" confirm="confirm" cancel="cancel" okText="Yes" cancelText="No">
                        <a href="#">点击删除</a>
                    </a-popconfirm>
                    <a-divider>加载</a-divider>
 
                    <a-spin></a-spin>
                    <a-divider>···</a-divider>
                    <a-spin>
                        <div>
                            这里是内容区!
                        </div>
                    </a-spin>
 
                    <a-back-top/>
 
 
                   <div  class = "footer">
                       <a-divider>这里是底线</a-divider>
                   </div>
 
 
        </div>
        )
        },
        data() {
            return {
                modal_loading_flag: false,
                basic_modal_flag: false,
                globalTips: [
                    '普通提示',
                    '加载提示',
                    '警告提示',
                    '错误提示'
                ],
                showDrawer: false,
                menu: {
                    template: "<a-menu><a-menu-item>001</a-menu-item></a-menu>"
                }
            }
        },
        methods: {
            //发送通知
            submit_nitify(type) {
                console.log(type)
                this.$notification.open({
                    message: '这是一条通知!',
                    description: '这是描述内容!.',
                    icon: <a-icon type="smile" style="color: #108ee9"/>,
                    onClick: () => {
                        console.log('你点击了通知');
                    },
                });
            },
            //打开modal
            basic_modal_open() {
                console.log('打开Modal');
                this.basic_modal_flag = !this.basic_modal_flag
            },
            //提交modal
            basic_modal_ok() {
                this.modal_loading_flag = true;
                setTimeout(() => {
                    this.basic_modal_flag = !this.basic_modal_flag
                    this.$message.info("提交完成!")
                }, 1500)
            },
            //全局提示
            openGlobalTips(e) {
                console.log(e)
                switch (e) {
                    case 0 :
                        this.$message.info("这是一条普通的全局提示!")
                        break;
                    case 1 :
                        let task = this.$message.loading("这是一条加载提示!", 0)
                        setTimeout(task, 1000)
 
                        break;
                    case 2 :
                        this.$message.warn("这是一条警告提示!")
                        break;
                    case 3 :
                        this.$message.error("这是一条错误提示!")
                        break;
                    case 4 :
                        break;
                    default:
                        break;
 
 
                }
            },
            controllerDrawer() {
                this.showDrawer = !this.showDrawer
            },
            dropDownClick(e) {
                console.log('点击下拉菜单' + e)
            }
        }
       
    }
</script>
 
<style scoped>
    .scroll-box {
        height: 1500px;
    }
    .footer{
        position: fixed;
        bottom: 0;
        width: 100%;
        left: 0;
 
 
    }
    .footer div{
 
        padd-top: 50px;;
 
    }
    
</style>
 

 在 react中,

这种在 JavaScript 中写类似 HMTL 代码的语法被称为 JSX。你可以理解为扩展版的 JavaScript。显然,这种语法在浏览器环境中是不能执行的,所以在代码加载到页面中之前,我们需要通过工具将它转译成标准的 JavaScript 语法,就像我们现在为什么可以用 ES6 的语法一样,尽管目前浏览器对它支持得还不好。例如下面这两段代码,实际上是等价的。

JSX 语法:

const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
由上面代码转译而来的标准 JavaScript 语法:

const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
JSX 语法更直观,写起来更简洁所以说 JSX 实际上是 React.createElement(component, props, ...children) 的语法糖。
HTML 中的所有标签,在 JSX 中都是支持的,基本上没有学习成本,只有如下几点略微的不同:

class 属性变为 className
tabindex 属性变为 tabIndex
for 属性变为 htmlFor
textarea 的值通过需要通过 value 属性来指定
style 属性的值接收一个对象,css 的属性变为驼峰写法,如:backgroundColor。
实际上,我们可以把在 JSX 中写的 HTML 标签看作是 React 内部已经实现了的基础组件。

上一篇:JSX语法(个人学习笔记)


下一篇:解决WebStrom无法switch JSX语法的问题