Question

下面，我将Tooltip组件包裹在ListItemText组件周围，以防标题文本太长并被截断。

不幸的是，我不得不将else子句中的ListItemText组件复制下来，这使得代码真的很难看。有办法简化吗？

return (
            <MenuItem id={id}
                selected={selected}
                className={`${classes.menuItem} ${menuItemClassName}`}
                button
                dense
                classes={{ selected: classes.selected }}
                onClick={onSelect}>
                {children}
                {title.length > 30 &&
                    <Tooltip title={title}>
                        <ListItemText
                            style={nested ? { paddingLeft: 32 } : undefined}
                            className={classes.attributeItem}
                            classes={{ primary: classes.attributeText }}>
                            {title}
                        </ListItemText>
                    </Tooltip>
                }
                {
                    30 > title.length &&
                        <ListItemText
                            style={nested ? { paddingLeft: 32 } : undefined}
                            className={classes.attributeItem}
                            classes={{ primary: classes.attributeText }}>
                            {title}
                        </ListItemText>
                }
            </MenuItem>
        );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

您可以将其放在return语句之前的变量中，并使用三元条件来提高可读性：

const listItemNode = (
    <ListItemText
        style={nested ? { paddingLeft: 32 } : undefined}
        className={classes.attributeItem}
        classes={{ primary: classes.attributeText }}>
        {title}
    </ListItemText>
)

return (
    <MenuItem id={id}
        selected={selected}
        className={`${classes.menuItem} ${menuItemClassName}`}
        button
        dense
        classes={{ selected: classes.selected }}
        onClick={onSelect}>
        {children}
        {title.length > 30 ?
            <Tooltip title={title}>{listItemNode}</Tooltip>
            :
            {listItemNode}
        }
    </MenuItem>
);

长度为30时还会发生其他情况吗？

Answer 2

我想说，将其存储到变量中是避免冗余的第一步

const MyListItemText = (
  <ListItemText
    style={nested ? { paddingLeft: 32 } : undefined}
    className={classes.attributeItem}
    classes={{ primary: classes.attributeText }}>
     {title}
  </ListItemText>);
return (
            <MenuItem id={id}
                selected={selected}
                className={`${classes.menuItem} ${menuItemClassName}`}
                button
                dense
                classes={{ selected: classes.selected }}
                onClick={onSelect}>
                {children}
                {title.length > 30 &&
                    <Tooltip title={title}>
                        {MyListItemText}
                    </Tooltip>
                }
                {
                    30 > title.length && {MyListItemText}
                }
            </MenuItem>
        );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

简化条件语句-仅在

2 个答案: