反应 - 元素到 jsx- 字符串
将一个ReactElement转换成相应的JSX字符串.
对单位测试和任何其他需要都有用.
特征 :
- 支持筑巢和深层筑巢
<div a={{b: {c: {d: <div />}}}} /> - 道具:支持字符串,数字,函数(内含为
prop={function noRefCheck() {}}),对象,ReactElement(内含)、regex、布林斯(含或不含) 短手语法),(中文(简体) ). - 按字母顺序排列道具
- 按定序排序对象键(
o={{a: 1, b:2}} === o={{b:2, a:1}}(中文(简体) ) - 控件
ref财务报告和审定财务报表key属性,它们总是在道具上 - React 的文件缩进风格
目录 生成方式 DocTOC 文档
设置
yarn add react-element-to-jsx-string [--dev]
使用量
import React from 'react';
import reactElementToJSXString from 'react-element-to-jsx-string';
console.log(reactElementToJSXString(<div a="1" b="2">Hello, world!</div>));
// <div
// a="1"
// b="2"
// >
// Hello, world!
// </div>
API 密码
反应 ElementToJSXString( reactElement [, 选项])
选项.DisplayName:函数(ReactElement)
提供不同的算法, 负责查找您元素的正确显示名称( 基础类的名称) .
只需返回您想要的名称, 用于提供 ReactElement, 作为字符串 .
选项. filter Props: string [] QQ(val: any, key: string) QQ布尔,默认 []
如果传递出一系列字符串,则过滤出任何名下道具 阵列。 例如 ['key'] 将抑制密钥="被添加的道具.
如果一个函数被通过,将要求每个道具有两个参数, 鼠标值和密钥,并将过滤出任何返回的假数据.
选项.show Default Props:布尔,默认为真实
如果真实, 则显示默认道具 .
如果错误,默认道具会被省略,除非它们与默认值不同.
选项。显示函数:布尔、默认虚假
如果为真,则显示函数机构.
如果错误, 函数机构将被替换为 function noRefCheck() {}。 。 。 .
选项。功能 值:函数,默认值 (fn) => fn
允许您覆盖函数值的默认格式.
functionValue 作为输入收到原始函数引用
,并应当发送任何值作为输出.
选项.tab stop: 数字, 默认 2
为缩进提供不同的列.
选项。使用BooleanShorthand语法:布尔语,默认为真
如果选中的话, 布尔道具值将被省略 短手语法。 。 。 .
如果错误, 布尔道具值会像 prop={true} 财务报告和审定财务报表 prop={false}
选项.max InlineAttizes LineLength:数字,默认未定义
允许在同一行上渲染多个属性并控制行为.
您可以提供最大字符数, 与标签名称一起渲染 。 如果线上字符数( 包括间隔和标签名)
超过此数字,然后所有属性都会在单独的行上显示。 此选项的默认值是 undefined。如果此选项是 undefined
如果一个元素上有一个以上的属性,它们就会在自己的线上产生. 注意: 作为属性值传递的对象总是渲染出
数行
选项。sortops:布尔,默认为真实
要么整理,要么不整理道具。 如果您使用这个 lib 来做一些异态渲染, 您应该设置它为虚假, 否则会导致无效的校验和, 因为道具顺序是反应异态校验和算法的一部分 .
选项.use FragmentShort 语法:布尔,默认真实
如果属实, 片段将用 JSX 的简短语法代表 <>...</> (尽可能).
如果错误,片段将永远用 JSX 的明确语法表示 <React.Fragment>...</React.Fragment>。 。 。 .
根据 规格数字 :
- 密钥片段将总是使用明确的语法:
<React.Fragment key={...}>...</React.Fragment> - 空片段将总是使用明确的语法:
<React.Fragment />
注:要使用碎片,必须使用 QQ 16.2 反应
环境要求
您使用的环境 react-element-to-jsx-string 应该有 ES2015 (英语) 支助.
使用 贝贝多填充 或者任何其他会让你 环境行为类似ES2015环境.
测试
yarn test
yarn test:watch
构建
yarn build
yarn build:watch
释放
决定这是不是 patch, (中文(简体) ), minor 或者说 major 释放,你看 http://semver.org/ (中文(简体) )
npm run release [major|minor|patch|x.x.x]
谢谢
alexlande/反应对jsx 是一个很好的灵感来源.
我们建造了自己的模块 因为我们有些需要 比如按字母顺序订购道具.