Question

我不明白如何使用React Semantic UI“列表”组件的“项目”属性。是否可以通过一种方法来传递每个项目的功能或组件？

HS

我在这里寻找类似“ component”的属性，该属性可用于设置渲染功能或组件。

Answer 1

如果父级允许，您应该能够将React组件传递给子级组件数组。查看文档，这似乎很有可能。

https://react.semantic-ui.com/elements/list/#types-basic

下面的示例直接来自文档

import React from 'react'
import { List } from 'semantic-ui-react'

const ListExampleBasic = () => (
  <List>
    <List.Item>Apples</List.Item>
    <List.Item>Pears</List.Item>
    <List.Item>Oranges</List.Item>
  </List>
)

export default ListExampleBasic

所以您要做的是为List.Item生成一个组件数组。根据您提供的商品状态。可以使用.map函数来实现。

import React from 'react'
import { List } from 'semantic-ui-react'

const RenderList = () => 
  <List>
    {repos.map((item) => RepoListItem(item))}
  </List>

const RenderRepoListItem = item => 
  <List.Item>
    <List.Content>{item.full_name}</List.Content>
  </List.Item>

由于JSX对合成组件使用类似于XML的语法，因此所有子组件都嵌套在其父组件内部。

此外，我不确定List.Content的来源，您可能会忽略这一点，而直接在List.Item中放入{item.full_name}

如何在React Semantic UI中使用List组件“ items”道具？

1 个答案: