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 }) =>...
props.value) } } render() { return ( this.container = elem} /> this.viewContainer = elem} /> ); } } export default JsonEditor 这样,我们便能实现一个初步的可实时预览的编辑器.可能效果长这样: 接近于成熟版,但是还有很多细节要处理. 对外暴露属性和方法以支持不同场景的需要 import Reac...
return this.container = elem} /> } } export default JsonEditor 至于options里的选项, 我们可以参考jsoneditor的API文档,里面写的很详细, 通过以上代码,我们便可以实现一个基本的react版的json编辑器组件.接下来我们来按照设计思路一步步实现可实时预览的json编辑器组件.3. 实现预览和编辑视图其实这一点很好实现,...
结合react进行二次封装 基于以上谈论,我们很容易将编辑器封装成react组件, 我们只需要在componentDidMount生命周期里初始化实例即可.react代码可能是这样的: importReact, { PureComponent }from'react' importJSONEditorfrom'jsoneditor' import'jsoneditor/dist/jsoneditor.css' classJsonEditorextendsPureComponent{ initJso...
(this.props.value)this.viewJsoneditor.update(this.props.value)}}render(){return(this.container=elem}/>this.viewContainer=elem}/>);}}exportdefaultJsonEditor 这样,我们便能实现一个初步的可实时预览的编辑器.可能效果长这样: 接近于成熟版,但是还有很多细节要处理. 对外暴露属性和方法以支持不同场景的需要...
(this.props.value)this.viewJsoneditor.update(this.props.value)}}render(){return(this.container=elem}/>this.viewContainer=elem}/>);}}export default JsonEditor 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. ...
this.container = elem} /> this.viewContainer = elem} /> ); } } export default JsonEditor 这样,我们便能实现一个初步的可实时预览的编辑器.可能效果长这样: 接近于成熟版,但是还有很多细节要处理. 4. 对外暴露属性和方法以支持不同场景的需要 import React...
{this.jsoneditor.update(this.props.value)this.viewJsoneditor.update(this.props.value)}}render(){return(this.container=elem}/>this.viewContainer=elem}/>);}}exportdefault
Actions: CarlosNZ/json-edit-react Caches Deployments Attestations All workflows Showing runs from all workflows 81 workflow runs pages build and deployment pages-build-deployment#90:byCarlosNZ September 30, 2024 08:3742s pages build and deployment...
6.react-json-view-lite DemoDownload A tiny component for React allowing to render JSON as a tree. It focused on the balance between performance for large JSON inputs and functionality. It might not have all the rich features (suce as customization, copy, json editinng) but still provides ...