reactjs 注意點

看風景就發表於2016-07-16
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

 

相關文章