React学习:React中render的用法

java 同时被 2 个专栏收录
18 篇文章 0 订阅
3 篇文章 0 订阅

原文链接:https://www.jianshu.com/p/00226a584eff
React中render的用法:
一个组件类必须要实现一个render方法,这个方法必须要返回一个jsx元素。必须要用一个外层的jsx元素把所有的内容包裹起来,返回并列的多个jsx元素是不合法的。
错误的写法:

render () {
return (
<div>第一个</div>
<div>第二个</div>
)
}

正确的写法:

render () {
return (
<div>
<div>第一个</div>
<div>第二个</div>
</div>
)
}

在jsx中可以插入Javascript表达式,表达式返回的结果会相应的渲染到页面上面
要求:用{}大括号包裹。

Render(){
Const word = ‘is good’
Return(
<div>
<h1>react小涛{ word }</h1>
</div>
)
}

用函数表达式来返回:(函数表达式要用括号包裹)

Render(){
Return(
<div>
<h1>react小涛!{(function(){return ‘is good’})}</h1>
</div>
)
}

{}可以放任何的Javascript代码,render都会把这些代码和返回的内容如实的渲染到页面上。
{}可以用在标签的属性上:

Render(){
Const className=‘header’
Return(
<div classname={ className }>
<h1>React小涛</h1>
</div>
)
}

直接使用class在react.js的元素上添加类名如

这种方式是不合法的。
还有一个特例是for属性,例如

Render(){
Const isGoodWord = true
Return(
<div>
<h1>
React 小书
{isGoodWord
? <strong> is good</strong>
: <span> is not good</span>
}
</h1>
</div>
)
}

上面的代码中定义了一个isGoodWord变量为true,下面有个用{}包含的表达式,根据isGoodWord的不同值返回不同的内容。

  • 1
    点赞
  • 0
    评论
  • 8
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值