json edit react
v.1.19.1
用于编辑或查看JSON/对象数据的React组件
重要的
破裂的变化：
theme输入有更改。内置主题现在必须单独导入并传递，而不仅仅是将主题命名为字符串。这是摇树的更好的，因此未使用的主题不会与您的构建捆绑在一起。查看主题和样式setData Prop，而不是使用onUpdate来外部更新数据。请参阅管理状态。 npm i json-edit-react
或者
yarn add json-edit-react
import { JsonEditor } from 'json-edit-react'
// In your React component:
return
< JsonEditor
data = { jsonData }
setData = { setJsonData } // optional
{ ... otherProps } /> （最终用户）
这是非常自我解释的（单击要编辑的“编辑”图标等），但是有一些与编辑者互动的不太明显方法：
Cmd/Ctrl/Shift-Enter添加新行（ Enter提交值）Enter新行，而Cmd/Ctrl/Shift-Enter用于提交Escape取消编辑Cmd/Ctrl会将路径复制到所选节点而不是其值jsonParse道具。 唯一需要的值是data （尽管您需要提供setData方法来更新数据）。
| 支柱 | 类型 | 默认 | 描述 |
|---|---|---|---|
data | object|array | 要显示 /编辑的数据 | |
setData | object|array => void | 更新data对象的方法。有关其他注释，请参见下面的管理状态。 | |
rootName | string | "data" | 在编辑器中显示的名称是数据对象的根。 |
onUpdate | UpdateFunction | 每当在编辑器中更新值（编辑，删除或添加）时运行的功能。请参阅更新功能。 | |
onEdit | UpdateFunction | 每当编辑值时运行的函数。 | |
onDelete | UpdateFunction | 每当删除值时运行的函数。 | |
onAdd | UpdateFunction | 每当添加新属性时运行的功能。 | |
onChange | OnChangeFunction | 用于修改/约束用户输入时的函数 - 请参见OnChange函数。 | |
onError | OnErrorFunction | 每当组件报告错误时运行的函数 - 请参见OnErrorFunction。 | |
showErrorMessages | boolean | true | 组件是否应显示自己的错误消息（您可能只想在提供自己的onError函数时都禁用此消息） |
enableClipboard | boolean|CopyFunction | true | 是否启用UI中的“复制到剪贴板”按钮。如果提供了一个函数，则假定为true ，并且每当复制项目时都会运行此功能。 |
indent | number | 3 | 指定显示数据中每个嵌套级别的压痕量。 |
collapse | boolean|number|FilterFunction | false | 定义JSON树的哪些节点将显示在负载时的UI中“打开”。如果boolean ，那将是全部或全部。一个number指定了嵌套深度，然后将关闭节点。有关更多良好控制，可以提供函数 - 请参阅过滤器功能。 |
collapseAnimationTime | number | 300 | 倒塌节点时的过渡动画的时间（以毫秒为单位）。 |
restrictEdit | boolean|FilterFunction | false | 如果是true ，则不允许编辑。可以提供更具体的功能 - 请参阅过滤器功能 |
restrictDelete | boolean|FilterFunction | false | 与restrictEdit一样，但要删除 |
restrictAdd | boolean|FilterFunction | false | 与restrictEdit一样，但要添加新属性 |
restrictTypeSelection | boolean|DataType[]|TypeFilterFunction | true | 为了限制用户可以选择的数据类型。可以是数据类型的列表（例如[ 'string', 'number', 'boolean', 'array', 'object', 'null' ] ）或布尔值。可以提供一个函数 - 应采用与上述FilterFunction函数相同的输入，但输出应为boolean | DataType[] 。 |
restrictDrag | boolean|FilterFunction | true | 设置为false以启用拖放功能。请参阅拖动-N-Drop |
searchText | string | undefined | 数据可见性将通过匹配与值匹配，使用以下在searchFilter中定义的方法进行过滤 |
searchFilter | "key"|"value"|"all"|SearchFilterFunction | undefined | 定义应如何匹配searchText以过滤可见的项目。请参阅搜索/过滤 |
searchDebounceTime | number | 350 | searchText更改时汇总时间 |
keySort | boolean|CompareFunction | false | 如果为true ，将订购对象键（使用默认的JS .sort() ）。还可以提供比较函数来定义排序行为。 |
showArrayIndices | boolean | true | 是否显示数组元素的索引（作为属性密钥）。 |
showStringQuotes | boolean | true | 是否在“引号”中显示字符串值。 |
showCollectionCount | boolean|"when-closed" | true | 是否显示每个集合中的项目数（对象或数组）。 |
defaultValue | any|DefaultValueFilterFunction | null | 当添加新属性时，它将使用此值初始化。可以提供与FilterFunction s几乎相同的输入的函数，但应输出值。这允许根据数据状态使用不同的默认值（例如顶级的默认值是一个对象，但在其他地方的字符串。） |
stringTruncate | number | 250 | 字符串值长于该字符将显示截断（使用... ）。编辑时，完整的字符串将始终可见。 |
translations | LocalisedStrings对象 | { } | UI字符串（例如错误消息）可以通过传递包含局部字符串值的对象（只有少数）来翻译。查看本地化 |
theme | ThemeInput | default | 内置主题之一（单独导入），或指定某些或所有主题属性的对象。看到主题。 |
className | string | 将CSS类的名称应用于组件。在大多数情况下，指定theme属性将更加简单。 | |
id | string | 主组件容器上的HTML id属性的名称。 | |
icons | {[iconName]: JSX.Element, ... } | { } | 通过在此处指定内置图标来替换内置图标。看到主题。 |
minWidth | number|string （CSS值） | 250 | 编辑器容器的最小宽度。 |
maxWidth | number|string （CSS值） | 600 | 编辑器容器的最大宽度。 |
rootFontSize | number|string （CSS值） | 16px | 所有其他Sizings均得出的“基本”字体大小（在em s中）。通过更改它，您将扩展整个组件。容器。 |
customNodeDefinitions | CustomNodeDefinition[] | 您可以根据条件功能提供自定义的组件来覆盖数据树中的特定节点。有关更多详细信息，请参见自定义节点。 （在主包装中提供了一个简单的自定义组件，用于将URL字符串变成活动链接 - 请参见此处） | |
customText | CustomTextDefinitions | 除了定位组件文本字符串外，您还可以根据数据动态更改它。有关更多详细信息，请参见自定义文本。 | |
customButtons | CustomButtonDefinition[] | [] | 如果您想在数据上执行自定义操作，则可以将自己的按钮添加到编辑按钮面板中。请参阅自定义按钮 |
jsonParse | (input: string) => JsonData | JSON.parse | 直接编辑JSON的一个块时，您可能希望允许一些“宽松”输入 - 例如'单引号'，落后逗号或未引用的字段名称。在这种情况下，您可以提供第三方JSON解析方法。我推荐JSON5，这是演示中使用的内容 |
jsonStringify | (data: JsonData) => string | (data) => JSON.stringify(data, null, 2) | 同样，在开始编辑JSON时，您可以覆盖JSON字符串的默认呈现。您可以向本机JSON.stringify()提供不同的格式参数，也可以提供第三方选项，例如上述JSON5。 |
errorMessageTimeout | number | 2500 | 时间（以毫秒为单位）在UI中显示错误消息。 |
keyboardControls | KeyboardControls | 如上所述 | 覆盖一些或全部键盘控件。有关详细信息，请参见键盘自定义。 |
insertAtTop | boolean| "object | "array" | false | 如果true ，请在顶部而不是底部插入新值。可以通过将"object"或"array"设置为“对象”或对象设置行为。 |
建议您自己在此组件之外管理data状态 - 只需传递setData方法，该方法在内部被称为更新data 。但是，这不是强制性的 - 如果您不提供setData方法，则将在内部管理数据，如果您不使用数据进行任何操作，那就很好。替代方法是使用更新功能在外部更新data ，但这不建议在特殊情况下使用，因为您可以遇到与内部状态同步数据（这是显示的内容）以及不必要的重新贷款的问题。更新功能应仅用于实现副作用，检查错误或在使用setData设置数据之前突变数据。
只要提供数据更新（编辑，删除或添加），就可以执行回调。您可能希望使用它来更新一些外部状态，进行API调用，在保存数据之前修改数据，或针对JSON模式验证数据结构。如果您想要所有更新的功能相同的功能，则只需onUpdate Prop就足够了。但是，如果您需要不同的编辑，删除和添加的东西，则可以通过onEdit ， onDelete和onAdd Props提供单独的更新功能。
该函数将作为参数接收以下对象：
{
newData , // data state after update
currentData , // data state before update
newValue , // the new value of the property being updated
currentValue , // the current value of the property being updated
name , // name of the property being updated
path // full path to the property being updated, as an array of property keys
// (e.g. [ "user", "friends", 1, "name" ] ) (equivalent to "user.friends[1].name")
}该函数无法返回（在这种情况下，数据正常更新），或一个值代表成功/失败，错误值或修改的数据的值。返回值可以是以下内容之一，并相应地处理：
true / void / undefined ：数据继续按正常更新false ：将更新视为错误，因此数据未更新（恢复为上一个值），并且在UI中显示了通用错误消息string ：也考虑了错误，因此没有数据更新，但是UI错误消息将是您提供的字符串[ "value", <value> ] ：告诉组件使用返回的<value>而不是输入数据。您可以使用它自动修改用户输入 - 例如，对数组进行排序或将时间戳字段插入对象。[ "error", <value> ] ：与string相同，但以较长的元组格式。与更新函数类似，随着用户输入更改， onChange函数被执行。您可以使用它来限制或限制用户输入 - 例如将数字限制为正值，或者防止字符串中的线路断裂。该函数必须返回一个值才能更新用户输入字段，因此，如果没有进行更改，请将其返回未修改。
输入对象类似于更新函数输入，但是没有newData字段（因为此操作发生在数据更新之前）。
// in <JsonEditor /> props
onChange = ( { newValue , name } ) => {
if ( name === "age" && newValue < 0 ) return 0 ;
if ( name === "age" && newValue > 100 ) return 100 ;
return newValue
} onChange = ( { newValue , name } ) => {
if ( name === 'name' && typeof newValue === "string" )
return newValue . replace ( / [^a-zA-Zs]|n|r / gm , '' ) ;
return newValue ;
}通常，每当检测到错误条件时，组件将显示简单的错误消息（例如，json输入，重复键或onUpdate函数返回的自定义错误））。但是，您可以提供自己的onError回调，以实现自己的错误UI或运行其他副作用。 （在前一种情况下，您可能也希望禁用showErrorMessages Prop。）回调的输入类似于其他回调：
{
currentData , // data state before update
currentValue , // the current value of the property being updated
errorValue , // the erroneous value that failed to update the property
name , // name of the property being updated
path , // full path to the property being updated, as an array of property keys
// (e.g. [ "user", "friends", 1, "name" ] ) (equivalent to "user.friends[1].name"),
error : {
code , // one of 'UPDATE_ERROR' | 'DELETE_ERROR' | 'ADD_ERROR' | 'INVALID_JSON' | 'KEY_EXISTS'
message // the (localised) error message that would be displayed
}
}（可以在演示中看到“自定义节点”数据集的自定义错误UI的示例 - 当您输入无效的JSON输入时，显示“ Toast”通知，而不是普通的组件错误消息。）
每当将项目复制到剪贴板（如果传递给enableClipboard prop）时，都会执行类似的回调，但是使用不同的输入参数：
key // name of the property being copied
path // path to the property
value // the value copied to the clipboard
type // Either "path" or "value" depending on whether "Cmd/Ctrl" was pressed
stringValue // A nicely stringified version of `value`
// (i.e. what the clipboard actually receives)由于单击“复制”时的用户反馈很少，因此一个好主意是在此回调中介绍某种通知。
除了每个值出现的“复制”，“编辑”和“删除”按钮外，如果需要在数据上允许一些自定义操作，则可以添加自己的按钮。在以下定义结构中，在customButtons Prop中提供一系列按钮定义：
{
Element : React . FC ,
onClick : ( nodeData : NodeData , e : React . MouseEvent ) => void
}其中NodeData与以前的“更新函数”接收到的数据结构相同。
您可以通过传递过滤器功能来控制数据结构的哪些节点可以编辑，删除或添加到数据类型。这些将在数据中的每个属性上调用，并且属性将根据函数返回true还是false （ true编辑）来强制执行。
该功能接收以下对象：
{
key , // name of the property
path , // path to the property (as an array of property keys)
level , // depth of the property (with 0 being the root)
index , // index of the node within its collection (based on display order)
value , // value of the property
size , // if a collection (object, array), the number of items (null for non-collections)
parentData , // parent object containing the current node
fullData // the full (overall) data object
collapsed // whether or not the current node is in a
// "collapsed" state (only for Collection nodes)
}例如，倒塌功能也可用于collapse支柱，因此您可以将数据出现，例如，深nest的集合打开，同时折叠了其他所有内容。
对于限制数据类型，（类型）滤波器功能稍微复杂得多。输入是相同的，但是输出可以是boolean （将给定节点的可用类型限制为全部或无），也可以将其限制在所有数据类型上）。可用值是：
"string""number""boolean""null""object""array"编辑对象密钥名称没有特定的限制函数，但是它们必须true限制性restrictEdit restrictDelete （以及集合的restrictAdd ），因为更改密钥名称等于删除属性并添加新的名称。
您还可以通过将过滤器函数传递到defaultValue Prop来设置动态默认值 - 输入与上面相同，但也将新的key作为其第二个参数，因此新值可以取决于添加的新键。
将所有这些限制过滤器一起使用可以使您可以执行相当复杂的数据架构。
// in <JsonEditor /> props
restrictEdit = { ( { level } ) => level === 0 }id字段进行编辑： restrictEdit = { ( { key } ) => key === "id" }
// You'd probably want to include this in `restrictDelete` as well restrictDelete = { ( { size } ) => size !== null } restrictAdd = { ( { key } ) => key !== "address" && key !== "users" }
// "Adding" is irrelevant for non-collection nodesstring值只能更改为字符串或对象（用于嵌套）null任何地方boolean值必须保持布尔值 restrictTypeSelection = { ( { path , value } ) => {
if ( path . includes ( 'user' ) ) return [ 'string' , 'number' , 'boolean' ]
if ( typeof value === 'boolean' ) return false
if ( typeof value === 'string' ) return [ 'string' , 'object' ]
return [ 'string' , 'number' , 'boolean' , 'array' , 'object' ] // no "null"
} }除了上述所述，动态控制对各种编辑工具的访问，还可以通过创建将数据传递到第三方架构验证库（例如AJV）的更新功能来进行完整的JSON模式验证。然后，这将拒绝任何无效的输入，并在UI中显示错误（或通过自定义OnError函数）。您可以在演示中看到一个示例，其中包含“ JSON Schema验证”数据集（以及“自定义节点”数据集）。
一个示例onUpdate验证功能（使用AJV）可能是这样的：
import { JsonEditor } from 'json-edit-react'
import Ajv from 'ajv'
import schema from './my-json-schema.json'
const ajv = new Ajv ( )
const validate = ajv . compile ( schema )
/// Etc....
// In the React component:
return
< JsonEditor
data = { jsonData }
onUpdate = { ( { newData } ) => {
const valid = validate ( newData )
if ( ! valid ) {
console . log ( 'Errors' , validate . errors )
const errorMessage = validate . errors
?. map ( ( error ) => ` ${ error . instancePath } ${ error . instancePath ? ': ' : '' } ${ error . message } ` )
. join ( 'n' )
// Send detailed error message to an external UI element, such as a "Toast" notification
displayError ( {
title : 'Not compliant with JSON Schema' ,
description : errorMessage ,
status : 'error' ,
} )
// This string returned to and displayed in json-edit-react UI
return 'JSON Schema error'
}
} }
{ ... otherProps } />笔记
这是一个新功能，应被视为“实验性”。请提供反馈或建议以改善它。
restrictDrag属性控制哪些项目（如果有）可以拖到新的位置。默认情况下，这是关闭的，因此您必须设置restrictDrag = false才能启用此功能。像上面的编辑限制一样，此属性也可以采用过滤功能以进行细粒度控制。不过，还有一些其他注意事项：
jsonb （Binary JSON）类型存储在Postgres数据库中，密钥顺序是毫无意义的，因此下次加载对象时，将按字母顺序列出键。restrictDrag滤镜过滤器适用于源元素（即被拖动的节点），而不是目的地。restrictDelete支架），因为将节点拖动到新目标本质上只是删除它并将其添加回其他地方。可以根据用户的搜索输入过滤显示的数据。用户输入应独立捕获（我们在这里不提供UI），并通过searchText道具传递。此输入在内部拒绝（可以使用searchDebounceTime Prop设置时间），因此也不需要。 searchText文本进行了测试，用searchFilter缩写规定指定。默认情况下（未定义searchFilter定义），它将与数据值匹配（带有情况不敏感的部分匹配 - IE输入“ ILB”，将匹配值“ Bilbo”）。
您可以通过将searchFilter设置为"key" （匹配属性名称）， "value" （上述默认值）或"all" （均匹配属性和值）来指定应匹配的内容。对于大多数用例，这应该足够，但是您可以指定自己的SearchFilterFunction 。搜索功能与上述过滤功能相同，但要为searchText提供另一个参数，即
( { key , path , level , value , ... etc } : FilterFunctionInput , searchText : string ) => boolean有两个辅助功能（ matchNode()和matchNodeKey() ），该软件包可能会使创建搜索功能更容易（这些是上述"key"和"value"匹配的内部使用的函数）。您可以看到他们在这里做什么。
可以在演示中看到一个示例自定义搜索功能，其中“客户端列表”数据集 - 搜索功能按名称和用户名匹配，并在其中一个匹配项时可见整个“客户端”对象，因此可以使用它来找到特定的人并编辑其特定详细信息：
( { path , fullData } , searchText ) => {
// Matches *any* node that shares a path (i.e. a descendent) with a matching name/username
if ( path ?. length >= 2 ) {
const index = path ?. [ 0 ]
return (
matchNode ( { value : fullData [ index ] . name } , searchText ) ||
matchNode ( { value : fullData [ index ] . username } , searchText )
)
} else return false
} 内置主题有一小部分（如演示应用程序所示）。为了使用其中之一，只需将其从包装中导入并将其作为主题道具传递：
import { JsonEditor , githubDarkTheme } from 'json-edit-react'
// ...other imports
const MyApp = ( ) => {
const [ data , setData ] = useState ( { one : 1 , two : 2 } )
return < JsonEditor
data = { data }
setData = { setData }
theme = { githubDarkTheme }
// other props...
/>
}包装中有以下主题可用（尽管实际上，这些主题更多地展示了功能 - 我愿意接受更好的内置主题，因此可以随意创建建议的问题）：
githubDarkThemegithubLightThememonoDarkThememonoLightThemecandyWrapperThemepsychedelicTheme但是，您可以通过自己的主题对象或部分传递。主题结构如下（这是“默认”主题定义）：
{
displayName : 'Default' ,
fragments : { edit : 'rgb(42, 161, 152)' } ,
styles : {
container : {
backgroundColor : '#f6f6f6' ,
fontFamily : 'monospace' ,
} ,
collection : { } ,
collectionInner : { } ,
collectionElement : { } ,
dropZone : { } ,
property : '#292929' ,
bracket : { color : 'rgb(0, 43, 54)' , fontWeight : 'bold' } ,
itemCount : { color : 'rgba(0, 0, 0, 0.3)' , fontStyle : 'italic' } ,
string : 'rgb(203, 75, 22)' ,
number : 'rgb(38, 139, 210)' ,
boolean : 'green' ,
null : { color : 'rgb(220, 50, 47)' , fontVariant : 'small-caps' , fontWeight : 'bold' } ,
input : [ '#292929' , { fontSize : '90%' } ] ,
inputHighlight : '#b3d8ff' ,
error : { fontSize : '0.8em' , color : 'red' , fontWeight : 'bold' } ,
iconCollection : 'rgb(0, 43, 54)' ,
iconEdit : 'edit' ,
iconDelete : 'rgb(203, 75, 22)' ,
iconAdd : 'edit' ,
iconCopy : 'rgb(38, 139, 210)' ,
iconOk : 'green' ,
iconCancel : 'rgb(203, 75, 22)' ,
} ,
} styles属性是重点关注的主要属性。每个键（ property ， bracket ， itemCount ）是指UI的一部分。每个密钥的值是：
string ，在这种情况下，它被解释为颜色（在container和inputHighlight的情况下为背景颜色）null ）。这使您可以根据内容或结构动态更改各种元素的样式。null时提供“后备”样式。 （在阵列中，以后的项目具有更高的优先级）对于一个简单的示例，如果您想使用“ githubdark”主题，但只需更改几个小事情，您就会指定这样的内容：
// in <JsonEditor /> props
theme = { [
githubDarkTheme ,
{
iconEdit : 'grey' ,
boolean : { color : 'red' , fontStyle : 'italic' , fontWeight : 'bold' , fontSize : '80%' } ,
} ,
] }它将从中更改“编辑”图标和布尔值： 
介入： 
或者，您可以从头开始创建自己的主题并覆盖整个主题对象。
因此，总而言之， theme道具都可以采用：
"candyWrapperTheme"fragments ， styles ， displayName等结构构造，或者只是styles部分（在根级别）[ "<themeName>, {...overrides } ]您可以通过选择“编辑此主题！”中的“演示应用程序”中的主题进行现场编辑来播放。从“演示数据”选择器中（尽管您将无法在JSON中创建功能）。
该组件样式的另一种方法是直接针对CSS类。组件中的每个元素都有一个唯一的类名称，因此您应该能够将它们定位在浏览器检查员中并相应地覆盖它们。所有班级名称始于前缀jer- ，例如jer-collection-header-row ， jer-value-string 。
上面的fragments属性只是一个方便，允许重复的样式“片段”一次定义并提及使用别名。例如，如果您希望所有图标蓝色且稍大且间隔稍大，则可以定义这样的片段：
fragments: { iconAdjust : { color : "blue" , fontSize : "110%" , marginRight : "0.6em" } }然后在主题对象中，只需使用：
{
... ,
iconEdit : "iconAdjust" ,
iconDelete : "iconAdjust" ,
iconAdd : "iconAdjust" ,
iconCopy : "iconAdjust" ,
}然后，当您以后要调整它时，您只需要在一个地方进行更新！
片段也可以与其他属性甚至其他碎片混合在一起，例如：
iconEdit: [ "iconAdjust" , "anotherFragment" , { marginLeft : "1em" } ]在内部，所有尺寸和间距都是在em S中完成的，从不px （除了rootFontSize之外，还设置了“基础”尺寸）。这使得缩放比较容易得多 - 只需更改rootFontSize Prop（或通过定位类或调整主题在主容器上设置fontSize ），然后相应地观察整个组件比例。
可以更换默认图标，但是您需要将它们作为React/HTML元素提供。只需在icons道具中定义任何一个或全部，按照以下方式键入：
icons = { {
add : < YourIcon />
edit : < YourIcon / >
delete : < YourIcon />
copy : < YourIcon / >
ok : < YourIcon / >
cancel : < YourIcon / >
chevron : < YourIcon / >
} }图标组件将需要定义自己的样式，因为主题样式不会添加到自定义元素中。
通过传递translations对象来替换默认字符串来本地化您的实现。键和默认值（英语）值如下：
{
ITEM_SINGLE : '{{count}} item' ,
ITEMS_MULTIPLE : '{{count}} items' ,
KEY_NEW : 'Enter new key' ,
ERROR_KEY_EXISTS : 'Key already exists' ,
ERROR_INVALID_JSON : 'Invalid JSON' ,
ERROR_UPDATE : 'Update unsuccessful' ,
ERROR_DELETE : 'Delete unsuccessful' ,
ERROR_ADD : 'Adding node unsuccessful' ,
DEFAULT_STRING : 'New data!' ,
DEFAULT_NEW_KEY : 'key' ,
} 您可以用自己的自定义组件替换数据树中的某些节点。一个示例可能是用于图像显示或自定义日期编辑器，或者只是添加一些视觉片段。请参阅交互式演示中的“自定义节点”数据集，以查看其在作用中。 （在其他数据集中编辑ISO字符串时，还有一个自定义日期选择器。）
自定义节点在customNodeDefinitions Prop中提供，作为以下结构的一系列对象：
{
condition , // a FilterFunction, as above
element , // React Component
customNodeProps , // object (optional)
hideKey , // boolean (optional)
defaultValue , // JSON value for a new instance of your component
showOnEdit // boolean, default false
showOnView // boolean, default true
showEditTools // boolean, default true
name // string (appears in Types selector)
showInTypesSelector , // boolean (optional), default false
// Only affects Collection nodes:
showCollectionWrapper // boolean (optional), default true
wrapperElement // React component (optional) to wrap *outside* the normal collection wrapper
wrapperProps // object (optional) -- props for the above wrapper component
} condition只是一个过滤器函数，具有相同的输入参数（ key ， path ， value等），而element是一个反应组件。数据结构中的每个节点都将通过每个条件函数运行，并且任何匹配的任何节点将被您的自定义组件替换。请注意，如果一个节点匹配多个自定义条件（来自多个组件），则将使用第一个条件，因此将其按优先顺序将其放在数组中。
该组件将接收与标准节点组件（请参阅代码库）的所有相同的道具，但是如果需要，您可以通过customNodeProps对象将其他道具传递给组件。演示中使用了自定义日期选择器的详尽示例（以及其他几个更基本的介绍），您可以检查一下如何利用标准道具和几个自定义道具。在此处查看源代码
默认情况下，您的组件将像其他任何值一样将其属于属性密钥的权利呈现。但是，您可以通过“设置hideKey: true来隐藏密钥本身，并且自定义组件将进行整个行。 （有关示例，请参见“自定义节点”数据集中的“由”框。）
另外，默认情况下，您的组件将被视为“显示”元素，即它将出现在JSON查看器中，但是在编辑时，它将恢复为标准编辑接口。但是，通过showOnEdit ， showOnView和showEditTools Props，这可以改变这一点。例如，只有在编辑和剩下的AS-IS进行显示时才需要一个日期选择器。 showEditTools道具是指在悬停在每个值右侧的编辑图标（复制，添加，编辑，删除）。如果您选择禁用这些内容，但您仍然希望组件具有“编辑”模式，则必须提供自己的UI机制来切换编辑。
您可以允许用户在编辑/添加值时将其选择为“类型”选择器中的“类型”来创建特殊节点的新实例。 SET showInTypesSelector: true启用。但是，如果启用了此功能，您还需要提供一个name （用户将在选择器中看到的内容）和一个defaultValue ，该名称是用户选择此“类型”时插入的数据。 （如果通过condition函数传递， defaultValue必须返回true ，以便使用自定义组件立即显示它。）
一个简单的自定义组件和定义可以将URL字符串变成可点击的链接，并附有主要软件包，供您在包装盒中使用。只是导入和使用：
import { JsonEditor , LinkCustomNodeDefinition } from 'json-edit-react'
// ...Other stuff
return (
< JsonEditor
{ ... otherProps }
customNodeDefinitions = { [ LinkCustomNodeDefinition , ... otherCustomDefinitions ] }
/>
)在大多数情况下，创建自定义节点以匹配值节点（即不是array或object集合节点），这是所有演示示例所显示的。但是，如果您确实希望针对整个系列节点，那么还有其他几件事要知道：
children属性显示，它只是您的组件的责任。element道具将显示在集合支架内（即它作为集合的内容显示）wrapperElement ，该包装在集合之外显示（可以按照wrapperProps如上所述提供道具）。同样，可以使用React children显示内部内容（包括您的自定义element ）。在此示例中，蓝色边框显示wrapperElement ，红色边框显示了内部element ： 
showCollectionWrapper （默认为true ），当设置为false时，它会隐藏周围的集合元素（即hide/show chevron和括号）。在这种情况下，如果需要的话，您必须在组件中提供自己的隐藏/显示机制。 可以更改组件显示的各种文本字符串。您可以将其定位，但也可以指定功能以根据某些条件覆盖显示的文本。例如，假设我们希望属性计数文本（例如6 items （例如6个项目）给出某种类型的节点的摘要，当折叠时看起来很不错。例如（取自演示）：
customText属性以任何可本地键作为键的对象，并带有返回字符串的函数（或null ，这会导致其后备到本地化或默认字符串）。这些功能的输入与过滤功能相同，因此在此示例中，它将像这样定义：
// The function definition
const itemCountReplacement = ( { key , value , size } ) => {
// This returns "Steve Rogers (Marvel)" for the node summary
if ( value instanceof Object && 'name' in value )
return ` ${ value . name } ( ${ ( value ) ?. publisher ?? '' } )`
// This returns "X names" for the alias lists
if ( key === 'aliases' && Array . isArray ( value ) )
return ` ${ size } ${ size === 1 ? 'name' : 'names' } `
// Everything else as normal
return null
}
// And in component props...
. . . otherProps ,
customText = {
ITEM_SINGLE : itemCountReplacement ,
ITEMS_MULTIPLE : itemCountReplacement ,
} 上面概述了默认键盘控件，但是可以自定义/覆盖这些控件。只需传递keyboardControls孔子支架，您希望覆盖定义的操作即可。默认配置对象是：
{
confirm : 'Enter' , // default for all Value nodes, and key entry
cancel : 'Escape' ,
objectConfirm : { key : 'Enter' , modifier : [ 'Meta' , 'Shift' , 'Control' ] } ,
objectLineBreak : 'Enter' ,
stringConfirm : 'Enter' ,
stringLineBreak : { key : 'Enter' , modifier : 'Shift' } ,
numberConfirm : 'Enter' ,
numberUp : 'ArrowUp' ,
numberDown : 'ArrowDown' ,
booleanConfirm : 'Enter' ,
clipboardModifier : [ 'Meta' , 'Control' ] ,
collapseModifier : 'Alt' ,
}如果（例如）您只想将一般的“确认”操作更改为“ CMD-Enter”（在Mac上）或“ Ctrl-Enter”，您只会传递：
keyboardControls = {
confirm : {
key : "Enter" ,
modifier : [ "Meta" , "Control" ]
}
}注意事项：
stringConfirm ， numberConfirm和booleanConfirm指定值，如果它们与您的confirm值有所不同。clipboardModifier ）。 即使在大多数情况下可能需要撤消/重做功能，但这并不是组件内置的，其主要原因是：
从软件包导出了一些可能在您自己的实现（创建过滤器或更新功能或自定义组件）中有用的辅助功能，组件和类型：
themes ：包含所有内置主题定义的对象LinkCustomComponent ：用于渲染超链接的组件LinkCustomNodeDefinition ：超链接的自定义节点定义IconAdd ， IconEdit ， IconDelete ， IconCopy ， IconOk ， IconCancel ， IconChevron ：所有内置图标组件matchNode ， matchNodeKey ：用于定义自定义搜索功能的帮助者truncate ：功能将字符串截断为指定的长度。请参阅此处extract ：功能是从字符串路径中提取深嵌套对象值的功能。请参阅此处assign ：函数从字符串路径设置深对象值。请参阅此处ThemeName ：字符串字面的内置主题名称列表Theme ：一个完整的主题对象ThemeInput ： theme道具的输入类型JsonEditorProps ：JSON编辑器组件的所有输入道具JsonData ：主要data对象 - 任何有效的JSON结构UpdateFunction ， OnChangeFunction ， OnErrorFunction FilterFunction ， CopyFunction ， SearchFilterFunction ， CompareFunction ， TypeFilterFunction ， LocalisedString ， CustomNodeDefinition ，CustomTextDefinitions，CustomTextDefinitions， CustomTextDefinitions ，CustomTextFunction， CustomTextFunction ，TranslateFunction ：获取本地化键并返回翻译的字符串的函数IconReplacements ： icons prop的输入类型CollectionNodeProps ：所有道具内部传递给“集合”节点（即对象/数组）ValueNodeProps ：所有道具内部传递给“ value”节点（即不是对象/数组）CustomNodeProps ：所有道具内部传递给自定义节点；基本上，与CollectionNodeProps相同，带有一个额外的customNodeProps字段，用于通过组件独有的道具DataType ： "string" | "number" | "boolean" | "null" | "object" | "array"KeyboardControls ：键盘自定义道具的结构请打开一个问题：https：//github.com/carlosnz/json-edit-react/issues
我想介绍的主要功能是：
This component is heavily inspired by react-json-view, a great package that I've used in my own projects. However, it seems to have been abandoned now, and requires a few critical fixes, so I decided to create my own from scratch and extend the functionality while I was at it.
defaultValue function takes the new key as second parameteroverflow: clip setting based on animating statetrue to represent successsetData prop to discourage reliance on internal data state managementuseEffect hooksnull #90onError callback available for custom error handlingrootFontSize prop to set the "base" size for the componentonChange prop to allow validation/restriction of user input as they typedata if user hasn't actually changed a value (prevents Undo from being unnecessarily triggered)wrapperElement propid propindex in Filter (and other) function inputdefaultValue prop
