@uiw/react-json-view 如何修改文本省略号、null节点、数组节点等

如何修改

1. 当文本超过设置shortenTextAfterLength数值时，会显示...,可以通过新版本的参数 stringEllipsis来修改（ts类型不对可忽略），低版本可尝试修改JsonView.Ellipsis
2. 当传入的数组值为null时(比如{a:null})，该组件值为空白，可通过自定义JsonView.Null修改
3. 默认的数组显示，会显示索引+分号（比如0:'数组值'），可通过自定义JsonView.KeyName修改key，通过JsonView.Colon修改分号

      <JsonView
        value={json}
        displayDataTypes={false}
        displayObjectSize={false}
        enableClipboard={false}
        collapsed={false}
        shortenTextAfterLength={5}
        stringEllipsis={'...显示更多'}
      >
        <JsonView.Null
          render={(props, result) => {
            if (result.value === null) {
              return <span {...props}>{result.value + ''}</span>
            }
          }}
        />
        <JsonView.KeyName
          render={(props, result) => {
            //数组不显示对应的索引
            if (Array.isArray(result.parentValue)) {
              return (
                <span {...props} style={{ ...props.style, display: 'none' }}>
                  {result.keyName}
                </span>
              )
            }
          }}
        />
        <JsonView.Colon
          render={(props, result) => {
            //数组不显示对应的分号 :
            if (Array.isArray(result.parentValue)) {
              return (
                <span {...props} style={{ ...props.style, display: 'none' }}>
                  :
                </span>
              )
            }
          }}
        />
      </JsonView>
  )

效果

当传入数据为'{"a":null, "b": ["val1","val2"]}'

修改前

修改后