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

Question

我的要求是，我在网页上有多个选项卡，每个选项卡中的数据来自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个单词，并在小窗口中显示它们，然后提供切换按钮以获得完整的视图。如果字符数小于300，则不进行切换。

因此，这里的切换窗口大小是动态的。它取决于字符或字数，并且随着字体大小而变化。在这里可以很容易地解决在其他div、框或按钮后面部分查看文本的问题。

{
// 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>}