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

posted on 2020-07-25 14:49  荣锋亮  阅读(574)  评论(0编辑  收藏  举报

导航