当div中的内容使用react溢出时，如何向div添加按钮以展开它？

Question

我想在div的内容溢出时向div添加一个按钮，然后单击该按钮将显示div的全部内容。

我想要一个可扩展的组件，以便我可以重用它。我该怎么办？

有一个侧面板，其中带有消息列表。因此，只要列表项中的内容超过两行。然后一个按钮应出现在列表项的末尾，然后单击它应展开div以显示全部内容。

下面是代码，

switch (type) {
    case 'upload':
        return (
            <Item
                icon={<Svg>}
                text={<Text name={name} text=' upload ' />}
                timestamp={timestamp}>
                <div className="additional_details">
                    <Image
                        width={70}
                        height={70}
                    />
                </div>
            </Notification>
        );
    case 'delete':
        return (
            <item
                icon={<Svg/>}
                text={<Text name={name}/>}
                timestamp={timestamp}/>
        );
}

const Text= ({ name, text, item_name, classname }) => {
    return (
        <span className={classname}>
            <span className="yellow">{name}</span> {text} <span 
                className="blue"> 
                {name} {item_name}
             </span>
        </span>
    );
};

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

.list {
    display: flex;
    flex-direction: row;
    font-size: 12px;
    padding: 8px;
    min-height: 49px;

    li {
        list-style: none;
    }

    .details_container {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        margin-right: 8px;

       .details {
            display: flex;
            color: #333;
            align-items: center;
            justify-content: center;
            flex-grow: 1;

            svg {
                margin-right: 8px;
                margin-left: 7px;
                flex: 0 0 auto;
                align-self: center;
                flex-shrink: 0;
            }

            span {
                flex-grow: 1;
            }

            time {
                flex: 0 0 auto;
                margin-left: 8px;
                padding-top: 2px;
            }


           .additional_details {
               flex-basis: 100%;
               width: 226px;
               margin-left: 11%;
           }
    }

有人可以帮我解决这个问题吗？谢谢。