帮酷LOGO
0 0 评论
  • 显示原文与译文双语对照的内容
文章标签:Extra  开发工具  react  ext  提取  RED  Viewer  component  
React JSON Viewer Component, Extracted from redux-devtools

  • 源代码名称:react-json-tree
  • 源代码网址:http://www.github.com/alexkuz/react-json-tree
  • react-json-tree源代码文档
  • react-json-tree源代码下载
  • Git URL:
    git://www.github.com/alexkuz/react-json-tree.git
  • Git Clone代码到本地:
    git clone http://www.github.com/alexkuz/react-json-tree
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/alexkuz/react-json-tree
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
  • react-json-tree

    redux devtools中提取JSON查看器组件。 支持 iterable对象,比如 Immutable.js

    用法

    import JSONTree from'react-json-tree'// If you're using Immutable.js: `npm i --save immutable`import { Map } from'immutable'// Inside a React component:constjson= {array: [1, 2, 3],bool: true,object: {foo:'bar' },immutable: Map({key:'value' })
    }
    <JSONTreedata={json}/>
    的结果:

    查看示例目录以获得更详细的信息。

    主题

    这里组件现在使用 react-base16-styling 模块,该模块允许通过 theme 属性自定义组件,该组件可以是:

    • base16 主题数据。 示例主题数据可以在这里找到。
    • 包含样式对象,字符串( 被看作是名字) 或者函数的对象。 函数用于扩展它的第一个参数 { style, className } 并且应该返回具有相同结构的对象。 其他参数取决于特定的上下文( 应该在这里描述)。 请参见 createStylingFromTheme.js 以获取样式对象键的列表。 另外,这个对象可以通过 extend 属性扩展 base16 主题。

    每个主题都有一个轻量级版本,使用 invertTheme prop启用。

    consttheme= {scheme:'monokai',author:'wimer hazenberg (http://www.monokai.nl)',base00:'#272822',base01:'#383830',base02:'#49483e',base03:'#75715e',base04:'#a59f85',base05:'#f8f8f2',base06:'#f5f4f1',base07:'#f9f8f5',base08:'#f92672',base09:'#fd971f',base0A:'#f4bf75',base0B:'#a6e22e',base0C:'#a1efe4',base0D:'#66d9ef',base0E:'#ae81ff',base0F:'#cc6633'};
    <div>
     <JSONTreedata={data}theme={theme}invertTheme={false}/>
    </div>
    结果( Monokai主题,深色背景):

    高级定制
    <div>
     <JSONTreedata={data}theme={{extend: theme,// underline keys for literal valuesvalueLabel: {textDecoration:'underline' },// switch key for objects to uppercase when object is expanded.// `nestedNodeLabel` receives additional arguments `expanded` and `keyPath`nestedNodeLabel: ({ style }, nodeType, expanded) => ({style: {. . .style,textTransform: expanded?'uppercase': style.textTransform } }) }}/>
    </div>
    为数组,对象和Iterables自定义标签

    你可以通过 getItemString 来定制数组。对象和iterable节点在( 可选) 中的显示方式。

    默认情况下,它将为:

    <JSONTreegetItemString={(type, data, itemType, itemString)=> <span>{itemType}{itemString}</span>}

    但是,如果你通过以下操作:

    constgetItemString = (type, data, itemType, itemString)
     => (<span>//{type}</span>);

    然后,子元素的预览现在看起来像这样:

    自定义渲染

    可以通过以下属性自定义呈现的标签和值:

    <JSONTreelabelRenderer={raw=> <strong>{raw}</strong>}valueRenderer={raw=> <em>{raw}</em>}/>

    在本例中,标签和值分别用 <strong><em> 包装器呈现。

    对于 labelRenderer,你可以提供完整路径查看这里 PR。

    更多选项
    • shouldExpandNode: function(keyName, data, level) - 确定是否应展开 node ( 默认情况下扩展 root )
    • hideRoot: Boolean - 如果 true,则隐藏 root node。
    • sortObjectKeys: Boolean | function(a, b) - 使用比较函数( 可选) 对对象键进行排序。 不应用于像 Immutable.Map 这样的iterable映射。

    Credits

    类似库

    许可证

    MIT



    文章标签:COM  ext  VIEW  react  component  RED  Extra  提取  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语