Question

我想将一个值传递给一个组件并根据该值呈现多个子组件。例如如果我在 props 中传入 count={4}，那么我想渲染 4 个 <Icon/> 组件。如果我传入 5，我想渲染 5，依此类推。

目前，我能想到的就是取值并将其转换为数组（即执行 for 循环并在每次迭代时将占位符元素推送到数组），然后执行映射到该数组上。但这似乎有点矫枉过正。

有没有简单的解决方法？

Answer 1

你可以这样做：

...
return(
 Array.from({length: props.count}, () => <Icon />)
)

Answer 2

您可以为此使用一个简单的 for 循环

    for(let i = 0; i < count ; i++){
        return <Icon />
    }

如果这不起作用，您可以执行以下操作。这是一个有点现代的 es6 功能。试试这个..

   {[...Array(count)].map((x, i) =>
      <Icon key={i} />
   )}

Answer 3

您可能正在寻找一种方法来填充 map 数量的孩子。检查此示例：https://snack.expo.io/@zvona/mapping-child-components

这是该示例中的核心代码：

const Icon = ({index}) => (
  <View><Text>{`Icon #${index + 1}`}</Text></View>
);

const Icons = ({count}) => (
  Array.from({length: count}).map((_item, index) => <Icon index={index}/>)
)

const App = () => {
  return (
    <View style={styles.container}>
      <Icons count={5} />
    </View>
  );
}

根据数值反应渲染组件的数量

3 个答案: