如何在react本机应用程序的render函数中包含Javascript代码？


How do I include Javascript code in the render function of a react native app?

本问题已经有最佳答案，请猛点这里访问。

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

1
2
3
4
5
6
7
8
9
10
11
12
render() {
  return (
    <View style={styles.container}>
      { for (let i=0; i<20; i++)
        {
           //This is my component
           <CounterButton />
        }
      }
    </View>
  );
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
createButtons() {
  for (let i =0; i<20; i++){
    <CounterButton />;
  }
}

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

    </View>
  );
}

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

相关讨论

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

坚持使用for循环：

1
2
3
4
5
6
7
createButtons() {
  let buttons = [];
  for (let i=0; i<20; i++){
    buttons.push(<CounterButton />);
  }
  return buttons;
}

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

1
2
3
4
5
6
7
render() {
  return (
    <View style={styles.container}>
      {[...Array(20).keys()].map(<CounterButton />)}    
    </View>
  );
}

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

1
2
3
4
5
6
7
createButtons() {
  const buttons = [];
  for (let i =0; i<20; i++){
    buttons.push(<CounterButton />);
  }
  return buttons;
}

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