我正在尝试在css3,ES6和React中完成阅读更多功能。
我有一个很长的描述(这来自服务器,所以它是动态的),我想在此添加“阅读更多”功能。如果描述超过3行,那么按钮/链接应该可以作为“阅读更多”,当我点击该按钮时,应该显示其余的描述。
这是我的代码:
阵营:
<div className="content">
Description of the product
<button onClick=(() => {})>Read more</button>
</div>
CSS:
.content{
overflow: hidden;
line-height: 1.2em;
height: 3.6em;
}
我无法弄清楚当我点击“阅读更多”按钮时,如何更改div id以使其高度自动化。 我有javascript代码,但我想在ES6中实现它
JS:
document.querySelector('button').addEventListener('click', function()
{
document.querySelector('#content').style.height= 'auto';
this.style.display= 'none';
});
非常感谢任何帮助!
答案 0 :(得分:1)
我在这里为你创造了一个小提琴:https://jsfiddle.net/jwm6k66c/3063/。您希望避免在使用React时直接操作dom。首选方法是使用组件state
来切换content
div上的类。
class App extends React.Component {
constructor(){
this.description = getDescription();
this.state = {
expanded: false
}
}
render(){
const { expanded } = this.state;
const toggledClass = expanded ? 'expanded' : 'collapsed';
return(
<div>
<div className={`content ${toggledClass}`}>
{this.description}
</div>
<button onClick={() => this.setState({ expanded: !expanded })}>
{expanded ? 'View Less' : 'View More'}
</button>
</div>
)
}
}
CSS
.content {
overflow: hidden;
line-height: 1.2em;
height: 3.6em;
}
.content.collapsed{
overflow: hidden;
}
.content.expanded{
overflow: visible;
height: auto;
}