简化第 3 方组件道具？

Question

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

示例：我想向我的 markdown 渲染添加一个组件 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返回一个数组但overrides需要 object，在你的情况下你可以使用component.reduce将值聚合到 object 中。

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

它还会稍微影响 return 语句：

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