Skip to content

[BUG] <title>JsonViewer 组件自定义渲染规则,自定义匹配逻辑有些问题 #2995

@phoegeraaa

Description

@phoegeraaa

Is there an existing issue for this?

  • I have searched the existing issues

Which Component

JsonViewer

Semi Version

2.84.0

Current Behavior

当 json 数据中键值对的值为 number 类型时,只能使用 ‘value == 具体值’ 来进行匹配吗
例如:
1、value == 1,正常匹配到,但是 value === 2,则匹配不到,
2、value == 1,正常匹配到,但是 value == 3 && path == 'root.rating3',则匹配不到
3、value == = '4' && path == 'root.rating4',正常匹配到,但是 value == 3 && path == 'root.rating3',则匹配不到

Expected Behavior

希望当键值对的值为 number 类型时,能正常匹配到

Steps To Reproduce

No response

ReproducibleCode

import React, { useRef } from 'react';
import { JsonViewer, Button, Rating, Popover, Tag, Image } from '@douyinfe/semi-ui';
const data = `{
  "rating1": 1,
  "rating2": 2,
  "rating3": 3,
  "rating4": "4"
}`;
function CustomRenderJsonComponent() {
    const jsonviewerRef = useRef();
    const customRenderRule = [
        {
            match: (value, path)=> path === 'root.rating1',
            render: (content) => {
                return '星级';
            }
        },
        {
            match: (value)=> value == 1,
            render: (content) => {
                return <Rating defaultValue={content} size={10} disabled/>;
            }
        },
        {
            match: (value, path)=> value === 2,
            render: (content) => {
                return <Rating defaultValue={content} size={10} disabled/>;
            }
        },
        {
            match: (value, path)=> value == 3 && path == 'root.rating3',
            render: (content) => {
                return <Rating defaultValue={content} size={10} disabled/>;
            }
        },
        {
            match: (value, path)=> value === '4' && path == 'root.rating4',
            render: (content) => {
                let num = JSON.parse(content)
                return <Rating defaultValue={num} size={10} disabled/>;
            }
        },
    ];
    return (
        <div>
            <div style={{ marginBottom: 16, marginTop: 16 }}>
                <JsonViewer
                    ref={jsonviewerRef}
                    height={200}
                    width={600}
                    value={data}
                    showSearch={false}
                    options={{ formatOptions: { tabSize: 4, insertSpaces: true, eol: '\n' }, customRenderRule, readOnly: true, autoWrap: true }}
                />
            </div>
        </div>
    );
}

render(CustomRenderJsonComponent);

Environment

- OS:
- browser:

Anything else?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions