CSS、ES6のより多くの機能を読む

Question

私は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をautoに変更することができます。 私はjavascriptのコードを持っているが、私は

JS ES6

でこれを実装する：すべてのヘルプは高く評価されて

document.querySelector('button').addEventListener('click', function() 
{ 
    document.querySelector('#content').style.height= 'auto'; 
this.style.display= 'none'; 
}); 

！

Answer 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; 
}