Question

我有一个侧面板并有一些列表项。我正在使用开关盒返回列表项。我没有为列表项重复代码，而是创建了一个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后的图像，带有类名详细信息。

我该怎么做。谢谢。

Answer 1

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

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>
        );
    }

如何使用react来重构开关案例的代码？

1 个答案: