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/>组件，并且可以将其重用为{{ 1}}元素可能会导致问题。

包装器组件就是这种情况，它可以在组件函数外部定义：

{IconStarWithProp}

const IconStarWithProp = () => <IconStar size="2rem"/>; function MyComponent(props) { return <> <IconStarWithProp/> <IconStarWithProp/> <IconStarWithProp/> <IconStarWithProp/> </>; }可以缩短为多个MyComponent：

IconStarWithProp

Answer 2

仅使用特定道具进行渲染是不可能的。

function MyComponent(props) {
  return Array(4).fill().map(() => <IconStar size="2rem"/> );
}

您可以使用props渲染数组的4个数组

Answer 3

function IconStarWithProp() {
  return <IconStar size="2rem" />;
}

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

如何使用相同的道具重复渲染相同的组件？

3 个答案: