javascript - 如何使用相同的 Prop 重复渲染相同的组件？

Question

我有一个多次渲染 Icon 组件的组件。

function MyComponent(props) {
  return(
    <IconStar/>
    <IconStar/>
    <IconStar/>
    <IconStar/>
  );
}

我正在寻找一种方法来制作类似的东西:

function MyComponent(props) {

  const IconStarWithProp = (<IconStar size="2rem"/>);

  return(
    <IconStarWithProp/>
    <IconStarWithProp/>
    <IconStarWithProp/>
    <IconStarWithProp/>
  );
}

我该怎么做？我必须使用 HOC 还是有更好的方法？

Answer 1

const IconStarWithProp = (<IconStar size="2rem"/>)不是正确的方法，因为 IconStarWithProp是 React 元素，不是 React 组件，它不能用作 <IconStarWithProp/>组件，并将其重用为 {IconStarWithProp}元素可能会导致问题。

wrapper组件就是这种情况，可以在组件函数外定义:

const IconStarWithProp = () => <IconStar size="2rem"/>;

function MyComponent(props) { 
  return <>
    <IconStarWithProp/>
    <IconStarWithProp/>
    <IconStarWithProp/>
    <IconStarWithProp/>
  </>;
}

MyComponent可以缩短为多个 IconStarWithProp :

function MyComponent(props) { 
  return Array(4).fill().map(() => <IconStarWithProp/>)
}