reactjs 注意点

render的return

return前要留一空行

return的括号要分别各占一行，不能与html同行

return中的html必须要有顶层容器包裹

return中的循环不能用for，改用map方法

 

jsx写法

jsx所有标签要闭合

jsx关键词写法
class -> className
for -> htmlFor
style -> {} 是一个对象，key使用JavaScript的驼峰命令，可以使用内联或外部对象

内联对象，双大括号

React.render(<div style={{color:"red"}}>Hello World!</div>, mountNode);

外部对象，单大括号

var divStyle = {
    color: 'white',
    backgroundImage: 'url(' + imgUrl + ')',
    WebkitTransition: 'all', // note the capital 'W' here
    msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};

React.render(<div style={divStyle}>Hello World!</div>, mountNode);

Reactjs中使用if/else

jsx不支持if/else,使用三元表达式代替

React.render(<div id={condition ? 'msg' : ''}>Hello World!</div>, mountNode);

在jsx外部使用if/else

var loginButton;
if (loggedIn) {
    loginButton = <LogoutButton />;
} else {
    loginButton = <LoginButton />;
}

return (
    <nav>
        <Home />
        {loginButton}
    </nav>
)

children

this.props.children 的子元素为多个，则为数组，子元素为1个，则为单个对象，非数组

dom取值

获取input,checkbox,radio,select的value值，使用event.target.value 或 refs[domName].value