Question

我有这个材料用户界面ListItemText：

<ListItemText primary={<div>
  <Table className={classes.table}>
    <TableRow>
      <TableCell width="40">{item.issue_state}</TableCell>
      <TableCell width="40">{item.issue_number}</TableCell>
      <TableCell width="600">{item.issue_title}</TableCell>
      <TableCell width="600">{item.issue_url}</TableCell>
    </TableRow>
  </Table>
</div>}/>

我不想显示URL，而是想要这样：

if (item.issue_url.includes("github.com") {
  item.issue_url = 'Public'
}
else if (item.issue_url.includes("github.company.com") {
  item.issue_url = 'Private'
}

其中TableCell显示Public中的Private，而不是整个URL。能做到吗？

Answer 1

您可以按以下方式使用

<ListItemText primary={<div>
  <Table className={classes.table}>
    <TableRow>
      <TableCell width="40">{item.issue_state}</TableCell>
      <TableCell width="40">{item.issue_number}</TableCell>
      <TableCell width="600">{item.issue_title}</TableCell>
      <TableCell width="600">{
            (item.issue_url.indexOf('github.company.com') >=0)
            ? 'Private' 
            : ((item.issue._url.indexOf('github.com') >=0) 
              ? 'Public'
              : '')
      }</TableCell>
    </TableRow>
  </Table>
</div>}/>

否则，一个好主意是基于issue_url在项中创建一个派生属性

Answer 2

执行以下操作：

<ListItemText primary={<div>
  <Table className={classes.table}>
    <TableRow>
      <TableCell width="40">{item.issue_state}</TableCell>
      <TableCell width="40">{item.issue_number}</TableCell>
      <TableCell width="600">{item.issue_title}</TableCell>
      <TableCell width="600">{item.issue_url.includes("github.company.com") ? 'Private' : 'Public' }</TableCell>
    </TableRow>
  </Table>
</div>}/>

在Material-UI标签内包含JavaScript

2 个答案: