数组html标签,JXS数组以及声明组件和HTML标签

JSX 允许在模板中插入数组,数组会自动展开所有成员:

var arr = [

你好,react

,

很高兴能和你做朋友

]

ReactDOM.render(

{arr}

,

document.getElementById('demo')

);

输出效果:

b22cb90d02f2?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

循环输出数组.PNG

JSX也支持原生js的数组方法

var arr = [

你好,react

,

很高兴能和你做朋友

,

希望我们玩的愉快

]

ReactDOM.render(

循环输出数组:{arr}

数组长度:{arr.length}

输出数组下标为0的元素:{arr[0]}

输出数组最后一个元素:{arr[arr.length-1]}

,

document.getElementById('demo')

);

输出效果:

b22cb90d02f2?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

数组方法.PNG

菜鸟的话:

HTML 标签 vs. React 组件

React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。

要渲染 HTML 标签,只需在 JSX 里使用小写字母的标签名。

PS:我试验了一下,好像首字母大写也可以显示,但是组件的首字母小写就不行,所以是不是我下面这段代码渲染的跟所说的不一样呢?如果有大神看到,求提点一下。

var foo = {

width:200,

height:300,

background:'#000'

};

var myHtml =

;

ReactDOM.render(

myHtml,

document.getElementById('demo')

);

要渲染 React 组件,只需创建一个大写字母开头的本地变量。

PS:我又试验了一下,首字母小写的话就不显示了。

var MyCom = React.createClass({

render:function(){

return

我是渲染组件

;

}

});

ReactDOM.render(

,

document.getElementById('demo')

);

React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。

注意:

由于 JSX 就是 JavaScript,一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代,React DOM 使用 className 和 htmlFor 来做对应的属性。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值