JSX本质

2021-01-25 14:12

阅读：484

标签：lda raw position sed bsp end 变量 node ops

1.JSX的使用

class JSXBaseDemo extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: ‘xiaoming‘,
            imgUrl: ‘https://img1.mukewang.com/5a9fc8070001a82402060220-140-140.jpg‘,
            flag: true
        }
    }
    render() {
        // 获取变量 插值
        const pElem = {this.state.name}
        return pElem

        // 表达式
        const exprElem = {this.state.flag ? ‘yes‘ : ‘no‘}
        return exprElem

        // 子元素
        const imgElem = 
            我的头像
            this.state.imgUrl}/>
        
        return imgElem

        // class
        const classElem = 设置 css class
        return classElem

        // style
        const styleData = { fontSize: ‘30px‘,  color: ‘blue‘ }
        const styleElem = 设置 style
        // 内联写法，注意 {{ 和 }}
        // const styleElem = 设置 style
        return styleElem

        // 原生 html
        const rawHtml = ‘富文本内容斜体加粗‘
        const rawHtmlData = {
            __html: rawHtml // 注意，必须是这种格式
        }
        const rawHtmlElem = 
            
            {rawHtml}
        
        return rawHtmlElem

        // 加载组件
        const componentElem = 
            JSX 中加载一个组件
            


        return componentElem
    }
}

export default JSXBaseDemo