如何為 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>}