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

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

var arr = [

你好,react

,

很高兴能和你做朋友

]

ReactDOM.render(

{arr}

,

document.getElementById('demo')

);

输出效果：

循环输出数组.PNG

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

var arr = [

你好,react

,

很高兴能和你做朋友

,

希望我们玩的愉快

]

ReactDOM.render(

循环输出数组:{arr}

数组长度:{arr.length}

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

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

,

document.getElementById('demo')

);

输出效果：

数组方法.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 来做对应的属性。