Wie erstellt man eine Show mehr/weniger Knopf mit ReactJS, um die Größe eines div anzupassen?

Question

Ich habe ein div mit vielen <p> und <span> innen, gibt es ein Beispiel, wie man eine Show mehr/weniger Knopf mit ReactJS, um die Größe eines div?

Ich habe versucht, npm mehr lesen und npm truncate, aber es scheint nicht mein Problem zu lösen. Weil ich die Größe eines Div und den Text in der Schaltfläche anpassen muss, um auf React zu klicken.

Danke!

Answer 1

Sie können react-Bootstrap auf diesem verwenden. Wickeln Sie Ihre div in Collapse Komponente so ...

constructor(){ 
    super(); 
    this.state = { showText: false }; 
} 

render(){ 
    return(
    <div> 
     <p>Some text here...</p> 
     <a onClick={() => this.setState({ showText: !this.state.showText })>See more</a> 
     <Collapse in={this.state.showText}> 
     <div> 
      <span> 
      Some more texts here...   
      </span> 
     </div> 
     </Collapse> 
    </div> 
); 
} 

Check this out https://react-bootstrap.github.io/components.html#transitions-collapse

Answer 2

Mit Reagieren Sie einfach die Wiedergabe Ihrer Komponente anpassen kann je nach Zustand. Sie können einen booleschen Wert im Status haben (z. B. isOpen) und den Wert umschalten, wenn Sie auf die Schaltfläche Mehr/Weniger klicken.

Danach müssen Sie nur X Elemente rendern und den Schaltflächentext abhängig vom booleschen Wert ändern.

Ich habe ein Beispiel mit Daten in einem Array gespeichert, aber Sie könnten leicht auf Ihren Fall anpassen.

const MAX_ITEMS = 3; 
 

 
class MoreLessExample extends React.Component{ 
 
    componentWillMount() { 
 
    this.state = { 
 
     isOpen: false, 
 
    }; 
 
    this.items = [ 
 
    'Item 1', 
 
    'Item 2', 
 
    'Item 3', 
 
    'Item 4', 
 
    'Item 5', 
 
    'Item 6', 
 
    ]; 
 
    } 
 
    
 
    toggle =() => { 
 
    this.setState({ isOpen: !this.state.isOpen }); 
 
    } 
 
    
 
    getRenderedItems() { 
 
    if (this.state.isOpen) { 
 
     return this.items; 
 
    } 
 
    return this.items.slice(0, MAX_ITEMS); 
 
    } 
 

 
    render() { 
 
    return(
 
     <div> 
 
     {this.getRenderedItems().map((item, id) => (
 
      <div key={id}>{item}</div> 
 
     ))} 
 
     <button onClick={this.toggle}> 
 
      {this.state.isOpen ? 'less' : 'more'} 
 
     </button> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 
    
 
ReactDOM.render(<MoreLessExample />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>