反应检查器

此寄存器为 故事书js/反应-督察。 。 。 .

变动

主要变化如下:

• 支助 replacer 用于替换对象属性的道具, 如 replacer 参数 JSON.stringify

权力 浏览器 DevTools 巡视员就在你的反应程序里 看看这个 互动操场 或者说 故事书。 。 。 .

安装

国家预防机制:

npm install @basemachina/react-inspector

建议的版本:

• 版本 3.0.2:如果您正在使用回放16.8.4或稍后.
• 版本 2.3.1:如果您正在使用更早的React版本.

开始

< 检查者 />

给视察员们的简称.

• <Inspector/> 等同为 <ObjectInspector> 或者说 <DOMInspector> 如果检查一个DOM节点.
• <Inspector table/> 等同为 <TableInspector>。 。 。 .

< 目标检查者 / >

喜欢 console.log将它视为美化的版本 <pre>JSON.stringify(data, null, 2)</pre>。 。 。 .

如何运作

树状态保存为根. 如果点击扩展层次结构中的一些元素,则元素被卸载后状态将被保留.

API 密码

本部分接受下列道具: pro

data: PropTypes.any数字 : 您想要检查的 Javascript 对象

name: PropTypes.string数字 : 指定根节点的可选名称,默认为 undefined

expandLevel: PropTypes.number数字 : 指定该树最初应扩展到哪个水平的整数

expandPaths: PropTypes.oneOfType([PropTypes.string, PropTypes.array])数字 : 包含组件初始化时应当扩展的所有路径的阵列,或仅一个路径的串

• 路径字符串类似于 乔森帕斯。 。 。 .
  • 这是一个点分隔的字符串像 $.foo.bar。 。 。 . $.foo.bar 扩展路径 $.foo.bar 地点 $ 是指根节点。 注意它只扩展出该单节点(但并非其所有的父母和根节点). 相反,你应该使用 expandPaths={['$', '$.foo', '$.foo.bar']} 向着世界扩展 $.foo.bar 节点.
  • 您可以使用 ['$', '$.1']
  • 您可以使用通配符扩展特定关卡上的所有路径
    • 例如,扩展所有一级和二级节点,使用 ['$', '$.*'] (相当于 expandLevel={2}(中文(简体) )
• 结果与扩展合并

showNonenumerable: PropTypes.bool数字 : 显示不可假定属性

sortObjectKeys: PropTypes.oneOfType([PropTypes.bool, PropTypes.func])数字 : 用可选比较函数排序对象密钥

何时 sortObjectKeys={true} 提供对象的密钥,除数组外,按字母顺序排序.

nodeRenderer: PropTypes.func数字 : 使用自定义 nodeRenderer 使对象具有属性(可选)

• 而不是使用默认 nodeRenderer您可以提供 用于渲染对象属性的自定义函数 。 这个 默认 节点朗德看起来像这样:

  import { ObjectRootLabel, ObjectLabel } from 'react-inspector'
  
  const defaultNodeRenderer = ({ depth, name, data, isNonenumerable, expanded }) =>
    depth === 0
      ? <ObjectRootLabel name={name} data={data} />
      : <ObjectLabel name={name} data={data} isNonenumerable={isNonenumerable} />;
  

replacer: PropTypes.func数字 : 使用自定义 replacer 要替换对象属性, 如 replacer 参数 JSON.stringify (可选)

import { ObjectInspector } from 'react-inspector'

const replacer = ({ data }) => {
  // replace the array data with the first 10 elements
  if (Array.isArray(data)) {
    return data.slice(0, 10);
  }
  return data;
}

const MyComponent = ({ data }) =>
  <div>
    <ObjectInspector data={data} replacer={replacer} />
  </div>

<表检查者 / >

喜欢 console.table。 。 。 .

API 密码

本部分接受下列道具: pro

data: PropTypes.oneOfType([PropTypes.array, PropTypes.object])数字 : 您想要检查的 Javascript 对象, 无论是数组还是对象

columns: PropTypes.array数字 : 您要在表格中显示的列名阵列

<DOM 检查器 />

API 密码

本部分接受下列道具: pro

data: PropTypes.object数字 : 您想要检查的DOM节点

使用量

import { ObjectInspector, TableInspector } from 'react-inspector';

// or use the shorthand
import { Inspector } from 'react-inspector';

const MyComponent = ({ data }) =>
  <div>
    <ObjectInspector data={data} />
    <TableInspector data={data} />

    <Inspector data={data} />
    <Inspector table data={data} />
  </div>

let data = { /* ... */ };

ReactDOM.render(
  <MyComponent data={data} />,
  document.getElementById('root')
);

尝试将检查人员嵌入到组件的渲染()方法中,为道具/状态提供活视图(热重装效果更好).

更多实例

查查故事书更多例子.

npm install && npm run storybook

打开 http://localhost:9001/ (英语)

主题

通过指定 theme 您可自定义检查人员. theme 道具可以是

1. 指预设主题的字符串( t)"chromeLight" 或者说 "chromeDark"默认为 "chromeLight"(中文(简体) )
2. 或提供必要变量的自定义对象。 离职 src/styles/themes 用于可能的主题变量.

示例1: 使用预设主题 :

<Inspector theme="chromeDark" data={{a: 'a', b: 'b'}}/>

实例2: 通过继承铬光主题来改变树节点缩进:

import { chromeLight } from 'react-inspector'

<Inspector theme={{...chromeLight, ...({ TREENODE_PADDING_LEFT: 20 })}} data={{a: 'a', b: 'b'}}/>

路线图

视察员类别:

• 树型
  • 常见对象
  • DOM 节点
• 表格样式
  • 列增压器
• 组样式

捐款

欢迎各方作出贡献. 以往贡献者

额外

• 如果你打算抓获 console.logs,你也许想看看 console-feed。 。 。 .
• react-object-inspector 软件包将被贬值. <ObjectInspector/> 现在是新软件包的一部分 react-inspector。 。 。 .
• 为什么是内线风格? 本文件 总结清楚.