React之JSX语法
介绍JSX是一种类XML语言,全程是JavaScript XML。React可以不使用JSX来编写组件,但是使用JSX可以让代码可读性更高、语义更清晰、对React元素进行抽象等
规则var HelloMessage = React.createClass({
render: function() {
return (
{/*标签闭合*/}
<div>
<h2>Hello</h2> <ul> <li>hello</li> </ul> {/*自闭合*/} <input type="text"/> </div> ); } });
标签可以任意的嵌套标签闭合标签必须严格闭合,否则无法编译通过 JSX 组件
组件属性和html一样,JSX中组件也有属性,传递属性的方式也相同 对于HTML组件: function render() {
return <p title="title" >hello,React,world </p> }
对于React组件可以定义自定义属性,传递自定义属性的方式如下: function render() {
var data = {name: 'sqliang',age:23}
return <p> <CustomComponent customProps={data}/> </p> } }
属性可以是字符串,也可以是任意的js变量,传递方式是将变量用花括号包裹
JSX花括号显示文本很多情况需要将js中的文本直接显示,做法和显示变量一样,用花括号 运算花括号里实际上除了变量以外,可以是一段js表达式,来做简单的运算: funtion render() {
var text = text;
var isTrue = false;
var arr = [1,2,3];
return <p> {text} {isTrue ? "true" : "false"} {arr.map(function(it) { return <span> {it} </span> })} </p> }
注释{/*xxxxxxxx*/}
限定规则render方法的返回值必须是有且只有一个根组件,即只能有一个闭合/自闭合根标签,或自定义组件 JSX编译方式JSX的写法最终会编译成原生js,其编译方式有两种:
jsx到js的转化:var Hello = React.createClass({
displayName: 'Hello',render: function() {
return React.createElement("div",null,"Hello ",this.props.name);
}
});
ReactDOM.render(
React.createElement(Hello,{name: "World"}),document.getElementById('container')
);
重点class要写成className数组遍历要添加key属性,否则会有error提示信息html转JSX工具,facebook提供了html转jsx组件的功能句,可以直接复制html转为jsx组件视频学习资源极客学院 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |