over 3 years ago

React.createElement 使用成本很高
babel-plugin-transform-react-inline-elements
可以將 React.createElement 轉換為 object literals
類似 {type: 'div', props: ...}

於專案資料夾執行

npm install --save-dev babel-plugin-transform-react-inline-elements

建立 .babelrc
內容如下

{
  "plugins": ["transform-react-inline-elements"]
}

轉換的 Component render() 內容如下

return(
  <div>
    <PopUp ref="PopUp">
      <div style={{"width":"150px","height":"180px","background-color":"white"}}>
      123
      465
      789
      </div>
    </PopUp>
    <input type="button" value="showBox" onClick={this.showBoxOne.bind(this)} />
    <PopUp ref="PopUp2">
    <ImgMask src="images/test.png" rectRadius={25} imgHeight={400} rectHeight={350}  rectWidth={250} />
    </PopUp>
    <input type="button" value="showBox2" onClick={this.showBoxTwo.bind(this)} />
  </div>
)

先前的轉換js


配置 plugin 轉換後js

如上圖可以看到此 plugin 可以將大部分的 React.createElement
轉換為更有效率的 object literals 宣告

← React Redux 使用 redux-thunk 做 Async Actions React higher order components 範例 →
 
comments powered by Disqus