如何为 API 段落中的动态数据或 REACT 中的简单文本制作显示更多/显示更少切换按钮？

Question

我的要求是，我在 web 页面上有多个选项卡，并且每个选项卡中的数据来自 API。 数据是动态的并且每天都在变化。 我有一个 div 说一个固定高度的矩形框，在它下面，有一个按钮“阅读更多/阅读更少”。 如果该矩形框中包含的数据超过该框的高度，则会显示“阅读更多”按钮，否则如果数据量小，则按钮不可见。 我已经完成了大部分这些事情，我的代码有两个问题是，

1. 有时数据显示为部分数据，即当数据量大时，部分数据隐藏在切换按钮后面，同时底部文本行部分隐藏在框或按钮后面。
2. 单击阅读更多后，我可以上下滚动数据。 但是，如果我在向下滚动的情况下单击“少读”按钮，则该 div 会锁定在那里并且滚动停止。 我想要那个，我可能在滚动页面上的任何地方，如果我点击“少读”，页面应该自动滚动到顶部并且滚动应该停止。

我附上了我的示例代码。 出于安全问题，我删除了一些类名，请帮助解决以上两点..

<div id="tab_number" >
<div className="">
    <div    className=''>
            <div ref={`showTheScrolling`} className={`${Theme} parent`} style={{overflow:"hidden"}}>
                <h3>Tab Heading</h3>
                        {
                            <div className="content" style={{height:"475px"}} dangerouslySetInnerHTML={{ __html: this.state.thisData.tabData }}></div>
                        }
        </div>
    {this.state.thisData.tabData.length > 1500 ?
    <div>
    <div ref={`buttonShowMore`} className="">
        <a id="ClickForShowMore" onClick={() => { this.toggleShow_more() }}><b>Show More</b></a>
    </div>
    <div ref={`buttonShowLess`} className=" showButton_hide">
        <a id="ClickForShowMore" onClick={() => { this.toggleShow_less() }}><b>Show Less</b></a>
    </div>
    </div> : ""
    }
</div>
</div>

和 render() 部分上面的两个函数

toggleShow_more = () => {
    console.log(this.refs)
    this.refs[`showTheScrolling`].classList.add('filterscroller');
    this.refs[`buttonShowMore`].classList.add('showButton_hide');
    this.refs[`buttonShowLess`].classList.remove('showButton_hide');
}


toggleShow_less = () => {
    console.log(this.refs)
    this.refs[`showTheScrolling`].classList.remove('filterscroller');
    this.refs[`buttonShowMore`].classList.remove('showButton_hide');
    this.refs[`buttonShowLess`].classList.add('showButton_hide');
    this.refs[`showTheScrolling_${id}`].scrollTo({top: 0, behavior: 'smooth'});
}

Answer 1

对于上述第一个问题，我们可以使用 splitString()。 这里我们最多计算 300 个字符，如果计数更多，那么我们检查前 50 个单词并在小 window 中显示它们，然后提供切换按钮以供完整查看。 如果字符数少于 300，则不切换。

所以，这里的切换 window 大小是动态的。 它取决于字符或字数，并且随着字体大小而变化。 在这里可以轻松解决在其他一些 div、box 或 button 后面部分查看文本的问题。

{
// if tabData character length > 300 then
this.state.thisData.tabData.length > 300 ?
    <div>
    {this.state.readMore ?
        <div className="your-classname" style={{ margin: "20px" }}
        dangerouslySetInnerHTML={{ __html: this.state.thisData.tabData }}>
        </div>
    :
    <div className="your-classname" style={{ margin: "20px" }}
    dangerouslySetInnerHTML={{ __html: this.splitString(this.state.thisData.tabData, " ", 50) }}>
    </div>
    }
    <div>

    <a className="your-classname2" style={{ }}
        onClick={() => this.toggleReadMore()}>
        {this.state.addRead ?
            // if you are working with mobile view also, the for css adjustment select appropriate class
                <div className={this.props.isMobileView ? "selectclass-if-isMobileViewTrue":"selectclass-if-isMobileViewFalse"}
                >READ MORE
                </div>
            </React.Fragment>
            :
            <React.Fragment>
                <div className={this.props.isMobileView ? "selectclass-if-isMobileViewTrue":"selectclass-if-isMobileViewFalse"}
                >READ LESS
                </div>
            </React.Fragment>}
    </a>
    </div>
    </div>
:
    // if tabData character length < 300 then 
    <div className="your-classname" style={{ margin: "20px" }}
        dangerouslySetInnerHTML={{ __html: this.state.thisData.tabData }}>
    </div>}