React中使用jsoneditor

1、查阅资料，导师封装了这个组件

import React, { useCallback, useEffect, useRef } from 'react';
import _ from 'lodash';
import JSONEditor from 'jsoneditor';
import 'jsoneditor/dist/jsoneditor.css';import styles from './index.less';const SMJsonEditor = props => {const { value, onChange, options = {} } = props;const editorRef = useRef();const editorObj = useRef();// 注意这边暴露到外面的是一个jsonconst handleChange = useCallback(value => {try {const currenValue = value === '' ? null : editorObj.current.get();onChange && onChange(currenValue);} catch (err) {}},[onChange]);// 初始化JSON编辑器const initEditor = useCallback(() => {if (!editorObj.current) {const totalOptions = {mode: 'code',onChangeText: handleChange,...options,};editorObj.current = new JSONEditor(editorRef.current, totalOptions);}}, [handleChange, options]);useEffect(() => {initEditor();}, [initEditor]);// 监听外部传入的valueuseEffect(() => {try {if (value && !_.isEqual(editorObj.current.get(), value)) {editorObj.current.update(value);}} catch (error) {// 当编辑器内容为空时，editorObj.current.get()会抛出异常，所以这里需要捕获}}, [value]);return <div className={styles['sm-json-editor']} ref={editorRef} />;
};export default SMJsonEditor;

2、样式文件，（当然你的可以不用加：global()，普通写就可以了，我这里是项目原因要这样写）

.sm-json-editor {width: 70%;padding: 0;// 这句是必要的，是要解决一个样式的Bug:global(.ace-jsoneditor) {font-size: 12px !important;}:global(.jsoneditor-menu) {display: none;}:global(.jsoneditor-navigation-bar) {display: none;}:global(.jsoneditor-outer.has-nav-bar.has-main-menu-bar) {margin-top: 0;padding-top: 0;}
}

3.要使用这个组件直接引入就可以了

React中使用jsoneditor相关推荐

处理 react_【学习教程】React 中阻止事件冒泡的问题
来源 | https://www.cnblogs.com/Wayou/p/react_event_issue.html 在正式开始前,先来看看 js 中事件的触发与事件处理器的执行. js 中事件的监 ...
react中ref的使用
在react中获取真实dom的时候就需要用到ref属性,具体使用如下 var MyComponent = React.createClass({handleClick: function() {con ...
react中使用构建缓存_如何在React中构建热图
react中使用构建缓存 Heat maps are a great way of visualizing correlations among two data sets. With colors ...
react中使用构建缓存_通过构建海滩度假胜地网站，了解如何使用React，Contentful和Netlify...
react中使用构建缓存 In this full course from John Smilga you will learn React by building a beach resort we ...
创建react应用程序_通过创建食谱应用程序来学习在React中使用API
创建react应用程序 Learn how to use external APIs with React and React Router in a full tutorial from Hamza ...
react中纯函数_如何在纯React中创建电子邮件芯片
react中纯函数 by Andreas Remdt 由Andreas Remdt 如何在纯React中创建电子邮件芯片 (How to create email chips in pure Reac ...
如何在React中使用Typescript
TypeScript can be very helpful to React developers. TypeScript对React开发人员可能非常有帮助. In this video, Ben ...
react中使用scss_我如何将CSS模块和SCSS集成到我的React应用程序中
react中使用scss by Max Goh 由Max Goh 我如何将CSS模块和SCSS集成到我的React应用程序中 (How I integrated CSS Modules with SC ...
React 中动态的加载组件 ---loadable-components
loadable-components 用于在react 中动态的加载组件安装方法: npm i loadable-components 使用: 引入: 代码中使用: 希望对你有所帮助
boost::unorder_map如何插入元素_「React」如何在React中优雅的实现动画
最简单的动画组件实现动画的本质,无非就是一个状态样式到另一个状态样式的过渡.最简单的动画组件,我们只需要指定两个状态的样式(进入的样式,离开的样式),以及一个开关(控制状态),即可完成. codep ...

React中使用jsoneditor

React中使用jsoneditor相关推荐

最新文章

热门文章