Quiero volver a escribir este componente https://github.com/josdejong/jsoneditor/blob/master/examples/react_advanced_demo/src/JSONEditorReact.js a un componente funcional. Yo hice esto:
const Editor = ({json, mode, onChange}) => { const elRef = useRef(null); useEffect(() => { const options = { onChangeText: onChange, onChangeJson: onChange, }; const jsonEditor = new JSONEditor(elRef.current, options); if (jsonEditor) { if (json) { jsonEditor.set(json); } if (mode) { jsonEditor.setMode(mode); } } return () => { if (jsonEditor) { jsonEditor.destroy(); } } },[json,mode]); return ( <div className={styles.jsoneditor_react_container} ref={elRef} /> ) } export default Editor; Mi pregunta es la siguiente: ¿Es correcto desmontar el componente jsonEditor.destroy(); dentro de ese useEffect con dependencias [json, mode] o debería crear otro useEffect con una matriz de dependencia vacía para obtener el mismo comportamiento que en el componente de clase.
Lo que está haciendo está bien siempre que destruir y reconstruir el JSONEditor no tome un tiempo perceptible ni cause una contracción visual que sea evidente para el usuario. El editor se limpiará cuando se desmonte el componente.
Pero, dado que parece permitirle cambiar el modo y JSON en una instancia existente (basada enla API ), creo que lo haría en lugar de destruirlo por completo y reconstruirlo cuando cambien:
const Editor = ({json, mode, onChange}) => { const elRef = useRef(null); const edRef = useRef(null); useEffect(() => { // On mount const options = { onChangeText: onChange, onChangeJson: onChange, }; const jsonEditor = edRef.current = new JSONEditor(elRef.current, options); if (json) { // jsonEditor.set(json); // I don't think you actually need these here, } // I *think* `useEffect` callbacks are run in if (mode) { // order so the below will do it. But... jsonEditor.setMode(mode); // } // return () => { // No `if`, you *know* it exists jsonEditor.destroy(); edRef.current = null; } }, []); useEffect(() => { const jsonEditor = edRef.current; if (!jsonEditor) { // I don't think this can happen return; } if (json) { jsonEditor.set(json); } if (mode) { jsonEditor.setMode(mode); } }, [json, mode]); return ( <div className={styles.jsoneditor_react_container} ref={elRef} /> ); }; export default Editor;Pero eso es más complicado, por lo que si lo que está haciendo funciona bien y brinda la experiencia de usuario que desea, es posible que desee dejarlo solo.