简化第 3 方组件道具？

Question

我正在使用 React 组件 markdown-to-jsx 将降价字符串转换为 HTML。它能够获取我创建的自定义组件并使用它们来呈现自定义标签。然而，这样做的支持太冗长了，有点烦人，我希望简化它，但很难实现。

示例：我想将一个组件 Dice 添加到我的降价渲染中。这很完美，但是哇，需要大量输入：

import Markdown from 'markdown-to-jsx';
import Dice from './Dice';
...
<Markdown options={{ overrides: { Dice: { component: Dice } } }}>
  {markdownContent}
</Markdown>

哇，如果我想添加多个组件怎么办？丑陋的。于是，我有了一个想法：写一个组件，使用 markdown-to-jsx 并简化 props:

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>

很酷，对吧？不，它不起作用。我不断收到这些错误：

<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

为什么丑陋的版本可以，而我的不行？？？

Answer 1

你很接近，components.map return 是一个数组，但 overrides 需要一个对象，在你的情况下你可以使用 component.reduce 将值聚合成一个改为对象。

const comps = components.reduce((accumulator, c) => { 
    accumulator[c.name] = {component: c};
    
    return accumulator;
}, {});

它也稍微影响了return声明：

return <Markdown options={{ overrides: comps }}>{children}</Markdown>;

简化第 3 方组件道具？

Simplify 3rd party component prop?

javascript

markdown

reactjs