1. 程式人生 > 實用技巧 >jsonx 基於json 建立react 元件

jsonx 基於json 建立react 元件

jsonx 是一個不錯的工具包,我們可以用來方便的建立react 的元件,是不個很不錯就有json 開發web引用的選擇工具

一個demo

具體index.web.js可以在官方的dist 目錄找到

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>JSONX TEST</title>
  <script type="text/javascript" src="index.web.js"></script>
 </head>
 <body>
  <div id="root"></div>
  <script type="text/javascript">
   const sampleJSONX = {
    component: 'div',
    props: {
     id: 'generatedJSONX',
     className:'jsonx',
     },
    children: [
      {
      component: 'p',
      props: {
       style: {
        color: 'red',
        fontWeight:'bold',
        },
       },
      __dangerouslyEvalProps:{
       onClick:'()=>alert("click works")'
       },
      children:'hello world',
      },
     ],
    };
   const boundConfig = {
    debug:true, 
    };
   jsonx.jsonxRender.call(boundConfig,{ jsonx: sampleJSONX, querySelector:'#root', });
  </script>
 </body>
</html>

參考資料

https://github.com/repetere/jsonx#readme