当列表项使用react溢出时，如何为每个列表项添加展开按钮？

Question

如果列表项中的内容使用react溢出，我想在列表项中添加展开按钮。

我要做什么？ 我在侧面板中有一个项目列表。我检查每个列表项，如果该列表项的内容溢出，那么我想为该列表项添加展开按钮。单击该展开按钮后，它应在列表项中显示其余内容。

到目前为止我尝试过什么？ 我为每个列表项的内容元素（span元素）添加了一个引用。当该span元素的高度大于36px时，我添加了展开按钮。点击展开按钮将显示其余列表项内容。

但是问题是，

由于每个列表项都是一个组件，因此单击其他列表项的扩展按钮也会同时扩展其他列表项（可能是因为在Text组件中使用了状态...

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

switch (notification.type) {
    case 'new_model_uploaded':
        return (
            <Notification
                icon={<SvgProject width="26" height="26"/>}
                text={<Text
                    base_height={36}
                    name={name}
                    text=' created'
                    item_name={itemname}/>}
                    timestamp={notification.timestamp}>
             <div className="additional_details">
                 <Image
                      width={70}
                      height={70}
                      item_id={filtered_item.id}
                  />
             </div>
          </Notification>
     );
  case 'deleted':
      return (
          <List
              icon={<Svg width="20" height="22"/>}
              text={<Text
                  base_height={36}
                  name={list.name}
                  text=' deleted item '
                  item_name={itemname}/>}
                  timestamp={item.timestamp}/>
       );
  default:
      return null;
}

function List(props) {
    return (
        <li className="list">
            <div className="details_container">
                <div className="details">
                    {props.icon}
                    {props.text}
                    <Time>{props.timestamp}</Time>
                </div>
                {props.children}
            </div>
        </li>
    );
}

class Text extends React.PureComponent {
    constructor(props) {
        super(props);
        this.span_ref = React.createRef();
        this.state = {
            expanded: false,
            overflow: false,
        };
     }

     componentDidMount () {
         if (this.span_ref.current.offsetHeight < 
         this.span_ref.current.scrollHeight) {
             this.setState({overflow: true});
         }
      }

      set_expanded = () => {
          this.setState({expanded: !this.state.expanded});
      };

      render () {
           return (
                <div ref={this.span_ref} style={{overflow: 'hidden', 
                height: (this.state.expanded ? null : 
                this.props.base_height)}}>
                    <span className={this.props.classname} >
                        <span className="red">{name}</span> 
                        {this.props.text} 
                        <span className="red">{this.props.name} 
                            {this.props.item_name}</span>
                        {this.props.additional_text}
                     </span> 
                     {this.state.overflow && <button onClick= 
                     {this.set_expanded} 
                     className={'expand_button' + (this.state.expanded ?  
                     ' expanded' : '')}>expand</button>}
                 </div>
             );
         }
     }

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

           expanded {
               top: 102px;
           }

           expand_button {
               position: absolute;
               left: 45%;
           }

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

      span {
          word-break: break-all;
      }
  }
}

如何确保单击一个展开按钮不会展开其他列表项。谢谢。