Ankündigung

Einklappen
Keine Ankündigung bisher.

Reactjs render function und listen ausgeben

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Reactjs render function und listen ausgeben

    Hallo,

    Ich benutze React 16.13.0, meine Frage bezieht sich auf die interne Umsetzung von Reactjs

    Mit folgendem Code gebe ich eine Tabelle mit 10 Zeilen aus aus:
    Code:
    // index.js import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import * as serviceWorker from './serviceWorker';
    ....
    class ClickButton extends React.Component {
        render() {
            return (
                <button>Klick mich!</button>
            )
        }
    }
    
    class TableRow extends React.Component {
        constructor(props) {
            super(props);
            this.elementCounter = props.elementCounter;
        }
    
        render() {
            return(
                <tr>
                    <td>
                        Element # {this.elementCounter}
                    </td>
                    <td>
                        <ClickButton/>
                    </td>
                </tr>
            )
        }
    }
    
    class Table extends React.Component {
        createTableRows() {
            let rows = [];
            for(let i = 1; i < 11; i++) {
                const row = <TableRow key={i} elementCounter={i} />;
                rows.push(row);
            }
            console.log(rows)
            return rows;
        }
    
        render() {
            return (
                <table>
                    <tbody>                
                        {this.createTableRows()}
                    </tbody>
                </table>
            )
        }
    }
    
    ...
    Ich übergebe also der Methode render() in der class Table die Methode createTableRows(). Diese gibt ein Array mit Objekten zurück.

    Meine Frage: Woher weiß die Render-Funktion, was sie mit dem Array anzustellen hat, also im aktuellen Fall, loopen?

    Mein Code ist diesem Tutorial angelehnt, eine Erklärung sehe ich dort nicht. In der Dokumentation zu Listen finde ich auch keine Antwort.

    Eine weitere Frage, welche deutschsprachigen JS-Foren sind zu empfehlen. Speziell welche sich mit Node.js weitergehend befassen. Forum jswelt.de hilft mir nicht weiter. Ich komme dort nicht auf meinen Account und der Support antwortet nicht.


  • #2
    Ich bin jetzt auch kein React-Experte, aber ich gehe davon aus, dass das einzig sinnvolle, was man (React) an der Stelle mit einem Array machen kann, ist ihn in einer Schleife zu durchlaufen, insbesondere dann, wenn jedes Element ein JSX (bzw. DOMNode) ist.

    Kommentar


    • #3
      https://www.google.com/search?q=how+...obile&ie=UTF-8

      Der erste link zur react Doku. Er beschreibt zwar nur, dass es so ist, aber ansonsten schau doch lieber al bei stackoverflow nach einer Antwort.

      Oder du clonst dir das repo und machst dich selbst auf die Suche. Ich könnte mir vorstellen, dass das gar nicht mal so schwierig zu finden ist.

      Kommentar

      Lädt...
      X