Question

我想在侧面板中显示项目列表。如果列表项中内容的高度超过36px，我想隐藏大于36px的内容并显示该列表项的扩展按钮（其内容超过36px），然后单击“扩展”按钮应显示列表项的全部内容。

到目前为止我尝试过什么？我向包含溢出文本的span元素添加了一个ref。如果span元素的高度超过36px，则显示扩展按钮，单击扩展按钮将显示列表项的内容。

现在有问题吗？工作正常。除了将扩展按钮添加到所有列表项的末尾。...我希望它们显示在内容超过36像素的特定列表项的底部。

它的工作原理如下图所示。

下面是代码，

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 (
             <span ref={this.span_ref} className={this.props.classname} 
                 style={{overflow: 'hidden', height: (this.state.expanded ? 
                 null : this.props.base_height)}}>
                 <span className="red">{name}</span> {this.props.text} 
                     <span className="red">{this.props.name} 
                         {this.props.item_name}</span>
                         {this.props.additional_text}

                {this.state.overflow && <button onClick={this.set_expanded} 
                    style={{position: 'absolute', bottom: 
                    0}}>expand</button>}
           </span> 
       );
    }
}

.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;
                color: #CCCCCC;
            }
        } 

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

如何使用react展开和折叠每个列表项？

0 个答案: