创建一个接受道具的包装器组件答案

【问题标题】：Create a wrapper component which accepts props创建一个接受道具的包装器组件
【发布时间】：2023-02-23 14:11:58
【问题描述】：

我有一个接受这样的道具的组件列表

export default function Item1({fontSize, color, ...props}) {
  return (
      <SvgIcon
        fontSize={fontSize}
        color={color}
        viewBox="0 0 18 18"
        alignmentBaseline="middle"
        {...props}
      >
          <somethingElse />
      </SvgIcon>
  )
}

我想创建一个包装类，以便它接受图标的名称并返回这些图标。我创建了一些东西，但我觉得编写如下代码不是一个好习惯：-

export default function WrapperComponent({name, fontSize, color, ...props }) {
  if(name === 'Item1'){
    return <Item1 fontSize={fontSize} color={color} />
  }
  if(name === 'Item2'){
    return <Item2 fontSize={fontSize} color={color} />
  }
  if(name === 'Item3'){
    return <Item3 fontSize={fontSize} color={color} />
  }
  return(
    <div>
      {children}
    </div>
  )
}

我想在这里创建一个映射，但我不确定如何实现？

【问题讨论】：

您可以使用条件渲染并根据图标名称仅渲染该图标
在组件 Item1 中只有 <SomethingElse /> 是可变的？所有其他元素的结构是否相同？即他们都有 SvgIcon？
是的，其他元素的结构是一样的。全部包括 <SvgIcon> 但我想在某个地方为此创建一个映射

标签： javascript reactjs

【解决方案1】：

如果此映射要绑定到 WrapperComponent，您可以使用普通 JS 对象创建有限状态：

const items = {
 Item1: ({fontSize, color}) => <Item1 fontSize={fontSize} color={color} />
 Item2: ({fontSize, color}) => <Item2 fontSize={fontSize} color={color} />
}

export default function WrapperComponent({name, fontSize, color, ...props }) {
  const item = items[name];

  if(item) {
    return item({ fontSize, color });
  }

  return(
    <div>
      {children}
    </div>
  )
}

这是 CodeSandbox 中的示例：

https://codesandbox.io/s/react-finite-state-with-plain-js-object-rh9ktx?file=/src/App.js

【讨论】：

【解决方案2】：

基本上你需要组件的名称是动态的。您可以创建一个 items.js 文件，如下所示：

import Item1 from 'items/Item1';
import Item2 from 'items/Item2';
import Item3 from 'items/Item3';
// and so on...

const items = {
  item1: Item1,
  item2: Item2,
  item3: Item3,
  // and so on...
}

export const getItem = (name) => {
  return items[name];
}

在您的包装器中，您可以使用 getItem 函数，如下所示：

import { getItem } from 'items';

export default function WrapperComponent({name, fontSize, color, ...props }) {
  const Item = getItem(name);

  return <Item fontSize={fontSize} color={color} />

  return(
    <div>
      {children}
    </div>
  )
}

我使用这种方法将组件动态加载到模态组件中，这应该适用于您的用例。

在你的情况下，我还建议将 <SomethingElse /> 组件动态化，而不是 <ItemX />。

【讨论】：

【解决方案3】：

我发现 switch 声明对这些情况很有用。根据您的变量是什么，它会返回不同的东西。它还包括一个默认值：

export default function WrapperComponent({name, fontSize, color, ...props }) {
  switch (name) {
    case 'Item1':
      return <Item1 fontSize={fontSize} color={color} />;
    case 'Item2':
      return <Item2 fontSize={fontSize} color={color} />;
    case 'Item3':
      return <Item3 fontSize={fontSize} color={color} />;
    default:
      return <div>{children}</div>;
  }
}

【讨论】：