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 内部已经实现了的基础组件。
