Estoy usando un componente React, markdown-to-jsx , para convertir cadenas de descuento en HTML. Tiene la capacidad de tomar componentes personalizados que he creado y usarlos para generar etiquetas personalizadas. Sin embargo, el accesorio para hacerlo es tan detallado que es un poco molesto y esperaba simplificarlo, pero tengo problemas para lograrlo.
ejemplo: quiero agregar un componente, Dados, a mi representación de rebajas. Esto funciona perfectamente, pero wow, es mucho escribir:
import Markdown from 'markdown-to-jsx'; import Dice from './Dice'; ... <Markdown options={{ overrides: { Dice: { component: Dice } } }}> {markdownContent} </Markdown> Wow, ¿y si tuviera varios componentes que quisiera agregar? Feo. Entonces, tuve una idea: escribir un componente que use markdown-to-jsx y simplificar los accesorios:
import Markdown from 'markdown-to-jsx'; (other imports) ... // Take the original component and run a map to create that ugly verbose code. function Md({ components, children }) { const comps = components.map((c) => ({ [c.name]: { component: c } })); return <Markdown options={{ overrides: { comps } }}>{children}</Markdown>; } ... <Md components={[Dice, Attack, Foo]}> {markdownContent} </Md>Bastante genial, ¿verdad? No. No funciona. Sigo recibiendo estos errores:
<Dice /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.Warning: The tag <Dice> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter¿Por qué funciona la versión fea pero la mía no?
Está cerca, components.map devuelve una matriz pero overrides necesitan un objeto, en su caso, podría usar component.reduce para agregar los valores en un objeto.
const comps = components.reduce((accumulator, c) => { accumulator[c.name] = {component: c}; return accumulator; }, {});También afecta ligeramente la declaración de devolución:
return <Markdown options={{ overrides: comps }}>{children}</Markdown>;