JSX使用

前言：

JSX即javascript XML。不同vue的模板中写少量js脚本，JSX是在js中写html标签

一、JSX中的js表达式

语法：{js表达式}
eg：
const dom = <div>你好，我是{name}</div>

二、JSX的条件渲染

const sondom = () => {
    if (flag) {
        return <div>正确</div>
    } else {
        return <div>错误</div>
    }
}
const fatherdom = (
    <div>
        {sondom()}
    </div>
)

三、JSX的列表渲染

const listdom = (
    <ul>
        {list.forEach(item => <li>{item.name}</li>)}
    </ul>
)

四、JSX中使用行内样式

const dom = <div style={{color:'red',backgroundColor:'blue'}}></div>

五、JSX中使用类名

在js中引入样式文件
import '../../css/index.css'

index.css中
.la-title{...}

const dom = <div className="la-title"></div>
const dom = <div class={['la-title', flag ? '.elli' : '']}></div>

六、在vue中使用的JSX

父组件中
import commTable from '../commTable.jsx'

defineComponent({
    components: {
        'comm-table': commTable 
    },
    render() {
        let scopedSlots = {
            default: (scope) => {
                return <span>{scope.row.name}</span>
            }
        }
        return (
            <div>
                <span onClick={() => {this.handler('123')}}></span>
                <comm-table onHandlerJump={ (name) => {this.jump(name)}}></comm-table>
                <child
                    scopedSlots = {scopedSlots }
                >
                </child>
            </div>
        )
    }
})

1、JSX中的插槽属性要用scopedSlots
2、JSX子组件的写法：短横杠和驼峰式都要试一下，有时可能因为写法渲染不了
3、JSX中dom事件和vue自定义事件都是onXxx的属性形式
4、JSX中没有深度样式的考虑，样式没有作用域，直接写子组件的样式即可