React - Création dynamique d'élément List à l'intérieur du composant

Question

Est-il possible d'ajouter un élément li dynamique dans ma liste ul? Je voudrais ajouter mon li en cliquant sur le bouton. Voici un exemple de code

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 fonction add actuelle() ne fonctionne pas sur React

Answer 1

Lorsque vous utilisez comme nous le faisons habituellement réagissons nous ne sommes pas « toucher » les DOM avec d'autres bibliothèques (comme jQuery).
Une des meilleures caractéristiques essentielles et de réagir est le DOM virtuel, le Reconciliation & diffing algorithm

React construit et entretient une représentation interne du rendu UI. Il inclut les éléments React que vous renvoyez de vos composants. Cette représentation permet à React d'éviter de créer des noeuds DOM et d'accéder à existants au-delà de la nécessité, car cela peut être plus lent que les opérations sur les objets JavaScript. Parfois, il est appelé un "DOM virtuel"

En réaction, vous créez des composants (fonctions) qui restituent/renvoient un jsx
Un exemple simple à votre scénario pourrait être:

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>