如何在反应原生应用程序的渲染函数中包含 Javascript 代码？ [复制]答案

【问题标题】：How do I include Javascript code in the render function of a react native app? [duplicate]如何在反应原生应用程序的渲染函数中包含 Javascript 代码？ [复制]
【发布时间】：2018-02-03 16:01:00
【问题描述】：

我是 React 和 React 原生菜鸟，所以这可能是一个非常愚蠢的问题，但我如何使用渲染函数中的“for 循环”来包含我的组件？这就是我所做的

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

但它抛出了一个错误，然后有人建议将代码包含在一个方法中并在渲染函数中调用它，所以我这样做了

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

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

    </View>
  );
}

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

【问题讨论】：

原理与 React.js 相同。另请参阅：How to render repeating elements? 和 How to loop and render elements in React.js without an array of objects to map?。此外，您出现空白屏幕的一个原因是您的函数没有返回任何要渲染的内容。
当它是一个空白屏幕时，您是否尝试删除您的View 的样式？删除或发布您的style={styles.container}

标签： react-native

【解决方案1】：

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>
  );
}

【讨论】：

【解决方案2】：

您的createButtons 函数不返回任何内容。您可以将按钮添加到数组并返回。

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

请注意，在 react-native 中渲染元素数组时，每个元素都需要有一个 key 属性。

【讨论】：