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   荣锋亮  阅读(580)  评论(0编辑  收藏  举报

编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)
历史上的今天:
2019-07-25 通过granfana 以及prometheus 比较zulu 、oracle、openjdk 等jvm 运行
2018-07-25 hasura graphql 角色访问控制
2018-07-25 hasura graphql schema 导出
2018-07-25 hasura graphql 模式拼接demo
2018-07-25 Reusing & Composing GraphQL APIs with GraphQL Bindings
2018-07-25 hasura graphql 模式拼接概念
2018-07-25 hasura graphql pg 自定义函数的使用

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示