JSX语法及特点介绍
1.1 基本语法
1）自定义组件名首字母大写；元素名即组件名，首字母需要大写。首字母小写时React会以为这是HTML的标准标签，因此自定义的组件名需要首字母大写，否则会报错。
2）嵌套；在render函数中return返回的只能包含一个顶层标签，否则也会报错。如：
class HelloWorld extends React.Component{ render(){ /* return ( <h1>title</h1> <p>Hello world</p> )*/ // 返回两个顶层标签，报错 return ( <div> <h1>title</h1> <p>Hello world</p> </div> ) } }
3）求值表达式；JSX基本语法规则，遇到HTML标签（以<开头），就用HTML规则解析；遇到代码块（以{开头），就用JS规则解析。
4）驼峰命名
5）htmlFor,className;添加组件属性，需要注意，class属性需要写成className，for属性需要写成htmlFor,因为class和for是JS保留字 .组件的属性可以在组件类的this.props对象上获取，比如name属性可以通过this.props.name读取。
6）JSX允许直接在模板插入JS变量。如果这个变量是一个数组，则会展开这个数组的所有成员
<script type="text/jsx">
var arr=[
<h1>Hello world!</h1>,
<h2>React is awesome</h2>
];
React.render(
<div>{arr}</div>,
document.body
)
</script>
7) 在JSX中插入用户输入是安全的，默认情况下ReactDOM会在渲染前，转义JSX中的任意值，渲染前，所有的值都被转化为字符串形式，这能预防XSS攻击。
1.2 注释
注释可以添加在两个部分，
1）子节点中,子节点中时，添加多行注释需要用{/**/}大括号包起来。不能添加单行注释
2）属性中；多行注释直接/**/注释，单行注释用//，并且需要换行
class HelloWorld extends React.Component{ render(){ return <p /*添加多行注释到属性中*/ name="test" // 添加单行注释后，需要换行 >Hello world {/*添加多行注释到子节点中，用大括号包起来*/}</p> } }
1.3 条件判断的四种写法
1) 使用三元表达式
var HelloWorld extends React.Component{ render() { const isLoggedIn = this.state.isLoggedIn; return ( <div> {isLoggedIn ? ( <LogoutButton onClick={this.handleLogoutClick} /> ) : ( <LoginButton onClick={this.handleLoginClick} /> )} </div> ); } }
2）使用变量
class LoginControl extends React.Component { constructor(props) { super(props); this.handleLoginClick = this.handleLoginClick.bind(this); this.handleLogoutClick = this.handleLogoutClick.bind(this); this.state = {isLoggedIn: false}; } handleLoginClick() { this.setState({isLoggedIn: true}); } handleLogoutClick() { this.setState({isLoggedIn: false}); } render() { const isLoggedIn = this.state.isLoggedIn; let button = null; if (isLoggedIn) { button = <LogoutButton onClick={this.handleLogoutClick} />; } else { button = <LoginButton onClick={this.handleLoginClick} />; } return ( <div> <Greeting isLoggedIn={isLoggedIn} /> {button} </div> ); } } ReactDOM.render( <LoginControl />, document.getElementById('root') );
3）直接调用函数
class HelloWorld extends React.Component{ constructor(props){ super(props); this.getName=this.getName.bind(this); } getName(){ if(this.props.name){ return this.props.name; }else{ return "World"; } } render(){ return <p>Hello {this.getName()}</p> } }); React.render(<HelloWorld/>,document.body);
4）使用逻辑运算符
class HelloWorld extends React.Component{ render(){ return <p>Hello {this.props.name||"World"}</p> } } React.render(<HelloWorld/>,document.body);
function Mailbox(props) { const unreadMessages = props.unreadMessages; return ( <div> <h1>Hello!</h1> {unreadMessages.length > 0 && <h2> You have {unreadMessages.length} unread messages. </h2> } </div> ); } const messages = ['React', 'Re: React', 'Re:Re: React']; ReactDOM.render( <Mailbox unreadMessages={messages} />, document.getElementById('root') );
1.4 万能的函数表达式
<script> class HelloWorld extends React.Component{ render(){ return <p>Hello { (function(obj){ if(obj.props.name){ return obj.props.name; }else{ return "World"; } }(this)) }</p> } } </script>
利用即时执行函数，即时执行函数有两种形式：
- 示例中的括号在外面的形式，这种返回的直接是函数运行后的值
- 括号在里面的形式，运行后先拿到了函数的引用，然后传入参数（this）运行函数得到返回值。
(function(obj){
if(obj.props.name){
return obj.props.name;
}else{
return "World";
}
})(this)
1.5 JSX的false处理
被渲染成 id="false"，id值为字符串false:
ReactDOM.render(<div id={false} />, mountNode);
input value 的值将会是 "false" 字符串
ReactDOM.render(<input value={false} />, mountNode);
没有子节点
ReactDOM.render(<div>{false}</div>, mountNode);
上面这个没有被渲染成 "false" 字符串是因为要考虑到这种常见的情况：<div>{x > 1 && 'You have more than one item'}</div>.
