账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    antDesign社区中的react-json-view不支持直接粘贴数据吗?
    • 见心书画许老师187533751612020-02-08 15:56
    60
    0

    react-json-view git:https://github.com/mac-s-g/re...

    官方demo: https://mac-s-g.github.io/rea...

    貌似只能一个key一个key的添加,求推荐好用的react json编辑器啊

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 龙飞云翔 普通会员 1楼

      是的,Ant Design社区中的react-json-view插件不支持直接粘贴数据。react-json-view是Ant Design的一款用于将JSON数据以图表形式展示的插件,主要用于数据可视化。它将JSON数据解析为React组件的数组,然后渲染成React组件,通过Array.pushArray.splice方法添加、删除或修改数据,实现数据的动态更新和可视化展示。

      如果你需要在Ant Design社区中直接粘贴JSON数据,你可能需要使用其他的JavaScript库,如d3.jsPlotly.js等,或者手动将JSON数据转化为React组件的数组,然后使用Array.pushArray.splice方法添加、删除或修改数据。例如:

      1. 使用d3.js库将JSON数据转化为React组件的数组: ```javascript import React from 'react'; import { d3 } from 'd3';

      const data = [ { name: 'Item 1', data: [1, 2, 3], }, { name: 'Item 2', data: [4, 5, 6], }, { name: 'Item 3', data: [7, 8, 9], }, ];

      const JsonComponent = ({ data }) => (

      {data.map((item, index) => (

      {item.name}

      {item.data.join(', ')}

      ))}

      );

      export default JsonComponent; 2. 使用`Plotly.js`库将JSON数据转化为React组件的数组:javascript import React from 'react'; import { Plotly } from 'plotly.js';

      const data = [ { name: 'Item 1', data: [ { x: 1, y: 2, color: 'red' }, { x: 2, y: 3, color: 'blue' }, ], }, { name: 'Item 2', data: [ { x: 4, y: 5, color: 'green' }, { x: 5, y: 6, color: 'orange' }, ], }, { name: 'Item 3', data: [ { x: 7, y: 8, color: 'purple' }, { x: 8, y: 9, color: 'yellow' }, ], }, ];

      const JsonComponent = ({ data }) => (

      ( ))}

      );

      export default JsonComponent; `` 在上述代码中,JsonComponent中首先导入了d3.jsPlotly.js库,然后定义了一个包含JSON数据的数组data。然后,使用map方法遍历data数组,对于每个元素,将itemdata属性的值转化为PlotlyPoint对象,并将其添加到PlotlyPlot组件的data数组中。最后,返回JsonComponent组件,其中包含一个PlotlyPlot`组件,用于展示JSON数据的可视化。

      需要注意的是,虽然react-json-viewd3.jsPlotly.js等库都可以将JSON数据转化为React组件的数组,但它们的实现方式和功能侧重点可能有所不同。因此,在使用这些库进行数据可视化时,可能需要根据具体的需求和场景选择合适的库或方法。例如,如果你需要更灵活的图表样式和更强大的数据处理功能,可能需要使用更复杂的技术,如react-reduxredux-thunk等库和API;如果你只需要简单的数据展示和可视化,可能只需要使用react-json-viewd3.js等库即可。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部