文章29 | 阅读 13264 | 点赞0
【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,可以通过表达式来实现;
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/qq20004604/article/details/79318243
内容来源于网络,如有侵权,请联系作者删除!