Question

我有以下反应组件

const Layout = () => {
return (
    <ThemeProvider>
        <Flex wrap>
            <Box width={[1, 1 / 3]}>
                <Text bold>Targeting</Text>

                <Iconlist text="Something"/>

            </Box>
            <Box width={[1, 1 / 3]}>
                <Text bold>Tactics</Text>
            </Box>
            <Box width={[1, 1 / 3]}>
                <Text bold>Results</Text>
            </Box>

        </Flex>
    </ThemeProvider>

)
};
export default Layout;

我想实现这样的事情：

...
<Iconlist text="Something"/>
<Iconlist text="Something else"/>
<Iconlist text="Something else else"/>
<Iconlist text="Something ...."/>
...

如何编写可以执行上述操作的循环，即显示多个Iconlist组件。我知道如何使用道具来改变＆＃34;某些东西＆＃34;值，但我无法运行循环。

我试过了：

<Box width={[1, 1 / 3]}>
                <Text bold>Targeting</Text>

                {
                    for(var i=0;i<=5;i++){
                    <Iconlist text="Something"/>
                }
                }

            </Box>

但我猜这不是在两者之间注入javascript的正确方法。我是React的初学者，并试图学习如何做到这一点。什么是最佳做法？

Answer 1

您可以使用Array.prototype.map()

map()方法创建一个新数组，其中包含调用a的结果为调用数组中的每个元素提供了函数。

示例

<Box width={[1, 1 / 3]}> <Text bold>Targeting</Text> { Array(5).map((i) => (<Iconlist key={i} text={`Something ${i}`} />)) } </Box>

Answer 2

from django.db import models

    class Category(models.Model):
        name=models.CharField(max_length=25, blank=False, null=False)
        is_featured=models.BooleanField(default=False)
        parent=models.ForeignKey('self', on_delete=models.CASCADE)

        def __str__(self):
            return self.name

    class Product(models.Model):
        name=models.CharField(max_length=25, blank=False, null=False)
        category=models.ForeignKey(Category, on_delete=models.CASCADE)
        uom=models.CharField(max_length=10)
        price=models.FloatField()

        def __str__(self):
            return '%s %s %s %s' % (self.name, self.category.name, self.price, self.uom)

Answer 3

首先需要像这样在数组中声明文本值

const texts = ['something', 'something else' ..]

在渲染方法中添加以下内容

{ texts.map((text) => <Iconlist text={text}/>) }

Answer 4

您可以将项目存储在状态：

中的数组中

...

constructor(props) {
  super(props)
  this.state = {
    items: [
      'something',
      'something else',
      'something else else',
      'something ...'
    ]
  }
}

...

...然后在渲染函数中映射数组：

...

{
  this.state.items.map(item => <Iconlist text={ item } />)
}

...

然后在更新状态时重新渲染。

你也可以将数组作为 prop 传递，然后像这样渲染：

...

{
  this.props.items.map(item => <Iconlist text={ item } />)
}

...

循环反应组件

4 个答案: