iT邦幫忙

2019 iT 邦幫忙鐵人賽

0

* 屬性

JSX的特性更接近JavaScript而不是HTML,所以在React DOM 使用camelCase小駝峰來命名,
用這方始來定義屬性名稱,而不是使用HTML的屬性名稱
例如:
class改為className
for 改為 htmlFor

class HelloWorld extends React.Component {
    render() {
        return (
            <div className="text">Hello World!</div>
        )
    }
}

* 樣式

最外層的{}是JSX語法,內層為JavaScript物件,而屬性與一般命名方式不同,為駝峰命名:
<HelloWorld style={{ color: '#FFFFFF',fontSize: '24px'}} />

* 事件處理

在JSX中透過inline事件綁定來監聽處理事件,也是駝峰式命名:
<HelloWorld onClick={this.handleClick} />

* 撰寫風格

  1. 當一般字串值當成屬性值時,字串使用雙括號""刮住,等號=和屬性之間不需要加空格。
    <HelloWorld text="hi" />
  2. 當花括號{}作為屬性值時,不需要加上雙引號"",同樣地,等號和屬性之間不需要加空格。
    <HelloWorld text={hi} />
  3. 多個屬性值時盡量使用多行(換行)的風格,否則太長難以閱讀。
<HelloWorld 
    style={{ color: '#FFFFFF',fontSize: '24px'}}
    onClick={this.handleClick}
    className="title"
/>
  1. 當字串與物件相遇,透過``符號來組合字串和物件
  2. {}裡面還可以塞什麼? 可以塞三運算式。
    <HelloWorld className={isNumber ? 'colorBlue' : 'colorRed' } />

看到這裡可以回頭看第25篇"React 快速建置開發環境與開發工具介紹" 中提到的ESLint套件,對於剛接觸JSX有極大的幫助,可以針對JSX語法撰寫格式做檢查。


上一篇
JSX (一)
下一篇
認識React
系列文
前端工程師的30份套餐30

尚未有邦友留言

立即登入留言