React(14)JSX 的一些语法说明

22、JSX

【1】标签名可以是对象的属性(前提对象属性是一个组件)

这种情况下,对象和属性的首字母,可以不大写(但 建议大写 ,以作区分)

let MyDom = {
    my() {
        return <p>这是一行</p>
    }
}

class MyInput extends React.Component {
    render() {
        return <div>
            <MyDom.my/>
        </div>
    }
}

【2】标签名不能是表达式(注意和上面的区别):

也就是说,通过标签名,你可以得到一个确定的组件,而不是一个只有在运行时,才能确认加载哪个组件。

【3】表达式:

可以用的简单,不能用的,当然就是 if 判断语句,或者是 for 循环啦,以及类似的东西。

不过函数是可以用的(注意是否成功返回 JSX 或者 你需要的内容,千万不要表达式的结果是一个函数,而不是函数运行的结果)

示例代码:

class Demo extends React.Component {
    constructor() {
        super()
        this.state = {
            arr: ['a', 'b', 'c']
        }
    }

    render() {
        return <div>
            {
                this.state.arr.map((item, index) => <p key={index}>{item}</p>)
            }
        </div>
    }
}

【4】未传值则默认传值为true:

class Demo extends React.Component {
    render() {
        return <div>
            {/* 以下两个,效果相同 */}
            <input type='checkbox' checked={true}/>
            <input type='checkbox' checked/>
        </div>
    }
}

【5】同时传多个属性:

如果觉得一个一个写绑定属性太麻烦了,那么可以用 es6 的对象的扩展操作符来实现。

不过唯一有问题的地方在于,假如你需要传一个state的变量,那么这种写法可能导致,state 被更新后,无法正常渲染到子组件(当然,也不是没办法解决,比如赋值的代码,写在生命周期里)。

class MyInput extends React.Component {
    render() {
        return <input value={this.props.theValue} onChange={e => {
            this.props.changeEvent.call(null, e)
        }}/>
    }
}

class Demo extends React.Component {
    constructor() {
        super()
        this.state = {
            value: ''
        }
        this.changeEvent = this.changeEvent.bind(this)
        this.myProps = {
            // theValue: this.state.value,  // 这种写法是不可以的,因为是 state 变量
            changeEvent: this.changeEvent
        }
    }

    render() {
        return <div>
            <MyInput theValue={this.state.value} {...this.myProps}/>
        </div>
    }

    changeEvent(e) {
        this.setState({
            value: e.target.value
        })
    }
}

【6】不会被显示的内容:

false、null、undefined 和 true 都是有效的,但它们不会直接被渲染:

如果你需要显示字符串形式的以上,可以通过 js 表达式,将他们转为字符串;

如果想选择性的显示一个 DOM,可以通过表达式来实现;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值