时间戳

首页 > 解决方案 > 如何使用反应重构开关盒的代码？

css - 如何使用反应重构开关盒的代码？

问题描述

我有一个侧面板，里面有一些列表项。我正在使用 switch case 来返回列表项。我没有为列表项重复代码，而是创建了一个 listitem 组件并将图标和时间戳传递给它，还可以在 listitem 组件中呈现子项。

下面是代码，

switch(item.type) {
    case 'uploaded':
        return (
            <ListItem icon={<Svg/>} text={name + 
            'created item' + item.name} timestamp={timestamp}>
                <div className="image">
                    <Image
                        width={70}
                        height={70}
                        item_id={item.id}
                    />
                </div>
            </ListItem>
        );
    case 'deleted':
        return (
            <ListItem icon={<Svg/>} text={name + 
               'deleted item' + item.name} timestamp={timestamp}>
            </ListItem>
        );


function ListItem(props) {
    return (
        <li className="item">
            <div className="details">
                {props.icon}
                <span>{props.text}</span>
            </div>
            {props.children}
            <Timestamp>{props.timestamp}</Timestamp>
        </li>
    );
}

上面的代码有效..

但我想要一种更简洁的方法来做到这一点。而不是将文本作为道具传递给 ListItem 有没有办法 ai 可以将它包含在 props.children 中并在 Listitem 中使用它。它会在带有详细信息类名的 div 之后添加…我希望它与详细信息 div 和带有类名详细信息的 div 之后的图像..

我该怎么做。谢谢。

标签： cssreactjs

解决方案

您可以在传递您的类型的新组件中移动所有内容：

function InnerItem(props) {
     switch(props.type) {
        case 'uploaded':
            return (
                <ListItem icon={<Svg/>} text={name + 
                'created item' + item.name} timestamp={timestamp}>
                    <div className="image">
                        <Image
                            width={70}
                            height={70}
                            item_id={item.id}
                        />
                    </div>
                </ListItem>
            );
        case 'deleted':
            return (
                <ListItem icon={<Svg/>} text={name + 
                   'deleted item' + item.name} timestamp={timestamp}>
                </ListItem>
            );
 }

    function ListItem(props) {
        return (
            <li className="item">
                <div className="details">
                    {props.icon}
                    <span>{props.text}</span>
                </div>
                 <InnerItem {...item}/>
                <Timestamp>{props.timestamp}</Timestamp>
            </li>
        );
    }

推荐阅读