React - Dynamische Erstellung von List Item innerhalb der Komponente

Question

Ist eine Möglichkeit, dynamische li Element in meine ul-Liste hinzuzufügen? Ich möchte meine li hinzufügen, indem Sie auf die Schaltfläche klicken. Hier ist Beispielcode

class Component1 extends React.Component { 

    constructor() { 
     super(); 
    } 

    add() { 
     let ul = document.getElementById('mylist'); 
     let li = document.createElement('li'); 
     li.appendChild(document.createTextNode({some_variables}); 
     ul.appendChild(li); 
    } 
    render() { 
     return (
       <a href="#" onClick={() => this.add()}>Add</a> 
       <ul id="mylist"> 
        /* dynamic list ITEM */ 

       </ul> 
     ); 
    } 
} 

ReactDOM.render(<Component1 />, document.getElementById('root')); 

Ofcourse aktuelle Funktion add() funktioniert nicht auf React

Answer 1

Bei der Verwendung reagieren wir nicht „berühren“ das DOM, wie wir in der Regel mit anderen Bibliotheken tun (wie jQuery).
Einer der besten und wichtigsten Funktionen von reagieren ist die virtuelle DOM, die Reconciliation & diffing algorithm

Reagieren baut und unterhält eine interne Darstellung der gerenderten UI. Es enthält die React-Elemente, die Sie von Ihren Komponenten zurückgeben. Diese Darstellung ermöglicht es React, das Erstellen von DOM-Knoten und den Zugriff auf vorhandene -Dateien zu vermeiden, da dies langsamer als die Operationen an JavaScript-Objekten sein kann. Manchmal wird es bezeichnet als „virtueller DOM“

In reagieren Sie erstellen Komponenten (Funktionen), die rendert/gibt eine jsx (Markup).
konnte Ein einfaches Beispiel für Ihr Szenario sein:

const ListItem = ({ value, onClick }) => (
 
    <li onClick={onClick}>{value}</li> 
 
); 
 

 
const List = ({ items, onItemClick }) => (
 
    <ul> 
 
    { 
 
     items.map((item, i) => <ListItem key={i} value={item} onClick={onItemClick} />) 
 
    } 
 
    </ul> 
 
); 
 

 
class App extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     inputValue: '', 
 
     fruites: ['Apple', 'Banana', 'Orange'] 
 
    }; 
 
    } 
 

 
    onClick =() => { 
 
    const { inputValue, fruites } = this.state; 
 
    if (inputValue) { 
 
     const nextState = [...fruites, inputValue]; 
 
     this.setState({ fruites: nextState, inputValue: '' }); 
 
    } 
 
    } 
 

 
    onChange = (e) => this.setState({ inputValue: e.target.value }); 
 

 
    handleItemClick = (e) => {console.log(e.target.innerHTML)} 
 

 
    render() { 
 
    const { fruites, inputValue } = this.state; 
 
    return (
 
     <div> 
 
     <input type="text" value={inputValue} onChange={this.onChange} /> 
 
     <button onClick={this.onClick}>Add</button> 
 
     <List items={fruites} onItemClick={this.handleItemClick} /> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 

 
ReactDOM.render(<App />, document.getElementById("root"));

<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="root"></div>