动态创建一个由 N 个 ListItemText 组成的 ListItem

Question

在谷歌搜索时无法找到任何有用的线索后，请在此处做出反应。

给定一个数据列表，其中每个数据都描述了 ListItem 应该包含的内容，我如何动态创建和 return ListItems 列表？每个 ListItem 都是不同的（例如，有些有按钮，有些没有）

const listData = [
        {
            "isClickable":true,
            "horizontalComponents":[
                {
                    "type": "image",
                    "data": {
                        "url": "http://tiny.co/foobar123"
                    }
                },
                {
                    "type": "text",
                    "componentData": {
                        "content": "This is a descriptive text. To view more please click the button on the right."
                    }
                },
                {
                    "type": "button",
                    "componentData": {
                        "buttonString": "View More"
                    }
                }
            ]
        }
    ];

    listData.forEach(itemData => {
        var columns: typeof ListItemText[] = [];
        itemData.horizontalComponents.forEach(component => {
            if (component.type == "text") {
                columns.push(
                    <ListItemText primary={`Line item foo`} />
                )
            }
        })
    })

Answer 1

React 组件接受数组作为子项，因此您可以选择使用 map 到 return ListItem

的数组

const listData = [
  {
    "isClickable": true,
    "horizontalComponents": [
      {
        "type": "image",
        "data": {
          "url": "http://tiny.co/foobar123"
        }
      },
      {
        "type": "text",
        "componentData": {
          "content": "This is a descriptive text. To view more please click the button on the right."
        }
      },
      {
        "type": "button",
        "componentData": {
          "buttonString": "View More"
        }
      }
    ]
  }
];

function App() {
  return (
    <List>
      {listData.map((listitem, index) => (
        <ListItem key={index}>
          {listitem.horizontalComponents.map((component, index) => {
            if (component.type === "text") {
              return (
                <ListItemText key={index}>{component.componentData.content}</ListItemText>
              );
            } else if (component.type === "button") {
              return <Button key={index} variant="contained">{component.componentData.buttonString}</Button>;
            }
          })}
        </ListItem>
      ))}
    </List>
  );
}

ReactDOM.render(<App/>, document.getElementById("root"));

<body>
  <div id="root"></div>
  
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>

  <script type="text/babel">
    const { List, ListItem, ListItemText, Button } = MaterialUI;
  </script>
</body>

动态创建一个由 N 个 ListItemText 组成的 ListItem

Dynamically create a ListItem comprised of N ListItemTexts

reactjs

material-ui

frontend

listitem