react-native – 如何在react本机应用程序的render函数中包含Jav

发布时间：2020-12-15 20:32:20 所属栏目：百科来源：网络整理

导读：参见英文答案 Loop inside React JSX????????????????????????????????????50个我是一个React和React原生菜鸟,所以它可能是一个非常愚蠢的问题,但我如何在渲染函数中使用’for loop’来包含我的组件？这就是我做的 render() { return ( View style={styles.

参见英文答案 > Loop inside React JSX????????????????????????????????????50个
我是一个React和React原生菜鸟,所以它可能是一个非常愚蠢的问题,但我如何在渲染函数中使用’for loop’来包含我的组件？这就是我做的

render() {
  return (
    <View style={styles.container}>
      { for (let i=0; i<20; i++) 
        {
           //This is my component
           <CounterButton />
        }
      }
    </View>
  );
}

但是它抛出了一个错误,然后有人建议在代码中包含代码并在render函数中调用它,所以我做了

createButtons() {
  for (let i =0; i<20; i++){
    <CounterButton />;
  }
}

render() {
  return (
    <View style={styles.container}>
      {this.createButtons()}

    </View>
  );
}

现在我没有看到错误,但它只是一个空白的屏幕.我知道你可以访问道具但是渲染函数应该主要只包含JSX代码吗？提前致谢.

解决方法

Jsx可以包含返回组件或组件数组的表达式.在您的情况下,您需要一些返回组件数组的东西.

坚持使用for循环：

createButtons() {
  let buttons = [];
  for (let i=0; i<20; i++){
    buttons.push(<CounterButton />);
  }
  return buttons;
}

如果你想在jsx中这样做,这样的东西应该工作：

render() {
  return (
    <View style={styles.container}>
      {[...Array(20).keys()].map(<CounterButton />)}    
    </View>
  );
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!