如何使用List组件“项目”托反应中的语义UI？

Question

我不知道如何使用语义做出反应UI“列表”组件的“物品”属性。有没有办法将它传递函数或将用来渲染每一个项目一个组成部分？

<List items={repos} component={RepoListItem} />;
const RepoListItem = props => {
  return (
    <List.Item>
      <List.Content>{props.full_name}</List.Content>
    </List.Item>
  );
};

我期待像“组件”在这里的属性，可以用来设置渲染功能或组件。

Answer 1

你应该能够通过反应的组分中的子组件的数组，如果家长允许它。综观文档，这非常似乎有可能。

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是从哪里来的，你也许可以省略，只是有{} item.full_name内部直接List.Item