react-native - 如何运行循环以将组件放置在 React Native 中

Question

我有一个选择器，允许用户从 1 到 5 中选择一个数字，并根据选择让用户选择 2 下一个屏幕显示应该运行循环 2 次并显示组件两次。我现在有这个代码:

function IndividualInfoCard({ noOfInd }) {

    var noOfIndSelected = noOfInd;

    return (
        <View>
            <IndividualInfo title={'Person 1'} />
            <IndividualInfo title={'Person 2'} />
            <IndividualInfo title={'Person 3'} />
            <IndividualInfo title={'Person 4'} />
            <IndividualInfo title={'Person 5'} />
        </View>
    );
}

这 5 个组件我需要按照 noOfIndSelected 中的数字放置所有这些组件.我搜索了但不知道如何使用 .map那么我该如何实现呢？

Answer 1

你试过做一个简单的吗？
我给你留下一个简单的例子。

 export default function App() {
   let items = [];
   for (var i = 0; i < 9; i++) {
    items.push(<li key={i}>hOLA</li>);
   }
   return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {items}
    </div>
   );
  }

在您的代码中应用它会是这样的:

function IndividualInfoCard({ noOfInd }) {

 var noOfIndSelected = noOfInd;
 var items = []
 for (var i = 0; i < noOfIndSelected; i++) {
   items.push(<IndividualInfo key={i} title={'Person '+i} />);
 }
 return (
    <View>
        {items}
    </View>
 );
}

CodeSandbox
抱歉，这是我在 stackoverflow 上的第一个答案