0
1.3K
VistasLos menús desplegables no funcionan con react-draft-wysiwyg en React JS
Traté de usar react-draft-wysiwyg usando los documentos
Se muestran algunos íconos pero no funcionan: block type , font , font size de fuente, pickerColor (los menús desplegables no funcionan). Por ejemplo, el font size está configurado en 16 de forma predeterminada, pero no puedo cambiarlo...
import { Editor } from "react-draft-wysiwyg"; import { EditorState } from "draft-js"; import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css"; const TabContent = ({ name, typeProof }) => { const [text, setText] = useState( () => EditorState.createEmpty(),); return ( <> <SafeAreaView> <Editor editorState={text} onEditorStateChange={setText} wrapperClassName="wrapperClassName" editorClassName="editorClassName" toolbarClassName="toolbarClassName" placeholder="Enter your text here:" style={{ //some styles }} toolbar={{ options: ['inline', 'blockType', 'fontSize', 'fontFamily', 'list', 'textAlign', 'colorPicker', 'embedded', 'remove', 'history'], inline: { inDropdown: true }, blockType: { inDropdown: true }, fontSize: { inDropdown: true }, fontFamily: { inDropdown: true }, list: { inDropdown: true }, textAlign: { inDropdown: true }, colorPicker: { inDropdown: true }, embedded: { inDropdown: true }, remove: { inDropdown: true }, history: { inDropdown: true }, }} /> </SafeAreaView> </> ); }; export default function Tabs({ data }) { return ( <TabsComponent forceRenderTabPanel> <TabList> {data.map(({ name }, i) => ( <Tab key={name}>Question {i + 1}</Tab> ))} </TabList> {data.map(({ name, typeProof }) => ( <TabPanel key={name}> <TabContent {...{ name, typeProof }} /> </TabPanel> ))} </TabsComponent> ); }2 Respuestas
Responde la pregunta0
Intenta reemplazar tus códigos por este ejemplo SandboxExample
Creo que la configuración de dependencia de su Sandbox no es buena. También encontré algo como esto, lo que hice, creé un nuevo Sandbox, agregue las dependencias react-draft-wysiwyg y draft-js , import Editor y lo uso en el componente de la aplicación como usted utilizado en sus archivos, y todo funciona, intente borrar su aplicación, lea esta aplicación npx Create React
Mi ejemplo de Sandbox este es mi ejemplo de Sandbox con componentes funcionales
Espero que sea útil para usted
0
Bueno, eso es raro, no tengo explicación para eso, pero solo he cambiado en index.js :
import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import App from "./App"; const rootElement = document.getElementById("root"); const root = createRoot(rootElement); root.render( <StrictMode> <App /> </StrictMode> );por :
import "./index.css"; import App from "./App"; import React from "react"; import ReactDOM from "react-dom"; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById("root") );¿Hay una explicación? Me alegraría entender que...