¿Cómo se puede agregar un elemento directamente al DOM principal? Usando Editor.js, creé un bloque personalizado. Sin embargo, el bloque personalizado se crea en un árbol DOM separado que lo hace inaccesible con Redux.
Esta es una captura de pantalla del árbol DOM: https://snipboard.io/vrbZLt.jpg
Index.js donde se representa el DOM principal:
ReactDOM.render( <React.StrictMode> <Provider store={store}> <App /> </Provider> </React.StrictMode>, document.getElementById('root') );Aquí es donde se creó el bloque personalizado:
export default class Checklist { static get toolbox() { return { icon: 'SVG Code...' title: 'Checklist', }; } static get isReadOnlySupported() { return true; } constructor({ data, config, api, readOnly }) { this.api = api; this.readOnly = readOnly; this.data = { events: data.events || [], }; this.CSS = { wrapper: 'walkthrough-timeline', }; this.nodes = { holder: null, }; } render() { const rootNode = document.createElement("div"); rootNode.setAttribute("class", this.CSS.wrapper); this.nodes.holder = rootNode; const onDataChange = (newData) => { this.data = { ...newData, }; }; ReactDOM.render( <ChecklistTool onDataChange={onDataChange} readOnly={this.readOnly} data={this.data} isAdmin={true} />, rootNode ); return this.nodes.holder; } save() { return this.data; } } Me doy cuenta de que document.createElement("div") creará un nuevo DOM. Simplemente no estoy seguro de cómo crear el componente ChecklistTool dentro del DOM principal para que tenga acceso a Redux. ¿Alguna idea sobre cómo hacer que esto suceda? ¡Gracias!
Dos cosas podrían ponerlo en la dirección correcta.
La forma de acceder al árbol DOM existente es a través de una ref.
const ref = useRef() return <div ref={ref}>Hello</div> Puede aplicar todo su método DOM a través ref.current
La función de renderizado se llama cada vez, esto no es bueno, porque no desea manejar el DOM en cada renderizado. En su lugar, debe buscar alguna ubicación de inicio o limpieza. Utilice el componente de función como ejemplo.
useEffect(() => { ref.current && ref.current.textContent = "Hello World" return () => { ref.current.textContent = "Notitle" } }, [])Lo anterior configurará el título una vez después del montaje del componente y restablecerá el título después del desmontaje.
Con base en los dos puntos anteriores, puede intentarlo según su propia lógica.