Anzeigen von N Listenelementen in der React-Komponente ohne JQuery

Question

Nach vielen Lektüren zu SO bin ich zu dem Schluss gekommen, dass die Verwendung von JQuery in einer React-Komponente größtenteils eine schlechte Übung ist. Also, wie würde ich folgendes erreichen, wobei Reagieren freundlich wie möglich ...

Lets sagen, ich habe eine Liste in meiner Komponente:

let myList = [ 
    {title: 'list item 1'}, 
    {title: 'list item 2'}, 
    {title: 'list item 3'}, 
    {title: 'list item 4'}, 
    {title: 'list item 5'}, 
    {title: 'list item 6'} 
] 

ich nur die ersten drei Elemente zeigen wollen, es sei denn, Show All ist angeklickt.

Und mein render() wie folgt aussieht:

render() { 

    return (
     <div> 
     myList.map(function(item, i) { 
      <a>{item.title}</a> 
     } 
     <a>Show All</a> 
     </div> 
    ) 
} 

Ich weiß, wie, wie dies in JQuery zu tun, aber ich frage mich, was wäre meine Lösung Best Practices reagieren werden.

Answer 1

Ich würde eine Funktion schreiben, die die Logik von was zu zeigen kapselt. Dann müssen Sie den Status verwenden, um zu erfassen, ob auf Alle anzeigen geklickt wurde oder nicht, sodass Sie unterscheiden können, wann Sie die ersten 3 anzeigen und wann alle angezeigt werden sollen. Der Schlüssel ist eine Anordnung des jsx Sie gemacht zurückkehren wollen:

renderItems() { 
    const itemList = []; 
    // can be more succinct here - just for demo purposes 
    for (let i = 0; i < myList.length; i++) { 
    if (this.state.showAll !== true && i === 3) { 
     break; 
    } 
    itemList.push(<a>{ myList[i].title }</a>); 
    } 
    return itemList; 
} 

render() { 
    return (
    <div> 
     { this.renderItems() } 
    </div> 
); 
} 

Sie werden dann für einen Handler hinzufügen müssen, wenn jemand klickt auf „Alle anzeigen“, um den Zustand zu setzen:

<a onClick={ this.showAll }>Show All</a> 

Wenn Sie auf eine Instanzmethode wie diese verweisen, stellen Sie sicher, dass Sie sie im Konstruktor an "this" binden:

constructor() { 
    this.showAll = this.showAll.bind(this); 
    this.state = { 
    showAll = false; 
    }; 
} 
showAll(e) { 
    e.preventDefault(); 
    this.setState({ showAll: true }); 
}