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>
.