Ich baue ein neues Projekt mit React. Ich habe eine Komponente, die mehrere untergeordnete Komponenten wie diese definiert:

class TimeStepDisplayGraph extends React.Component {

  render () {
      return <div id={ this.props.id }>
             <TimeStepDisplayGraphNode class="graphNodeStyles"/>
             <TimeStepDisplayGraphNode class="graphNodeStyles"/>
             <TimeStepDisplayGraphNode class="graphNodeStyles"/>
             <TimeStepDisplayGraphNode class="graphNodeStyles"/>
             <TimeStepDisplayGraphNode class="graphNodeStyles"/>
             <TimeStepDisplayGraphNode class="graphNodeStyles"/>
             </div>;
    }
  }

Idealerweise möchte ich jetzt nicht die Anzahl der erstellten Knoten explizit definieren lassen, sondern durch einen Aufruf wie:

function createGraphNode() {
  return React.createElement( <TimeStepDisplayGraphNode class="graphNodeStyles"/>);
}

Das rufe ich x mal an. Es scheint etwas wirklich Einfaches zu sein, und ich bin sicher, ich werde mich später dafür treten, dass ich so dumm bin, aber im Moment bin ich wirklich ratlos, wie ich das machen soll. Jede Hilfe wäre dankbar.

2
nebekerdev 8 Feb. 2020 im 08:08

3 Antworten

Beste Antwort

Es gibt viele Möglichkeiten, dies zu tun. Am einfachsten wäre es, einfach ein Array der Größe n zu erstellen und es zuzuordnen, wobei für jedes eine React-Komponente zurückgegeben wird:

render () {
  const arr = new Array(6);
  return (
    <div id={ this.props.id }>
      {arr.map((ea, i) => {
        return <TimeStepDisplayGraphNode key={i} class="graphNodeStyles"/>
      }}
    </div>
  );
}

Beachten Sie, dass Sie jedem erstellten Knoten die key - Requisite hinzufügen müssen, um sie zwischen den Renderings eindeutig zu identifizieren. Die Verwendung von i ist normalerweise nicht ideal (da es tatsächlich nicht eindeutig identifiziert, welcher Knoten welcher ist), aber wenn keine anderen identifizierenden Daten vorhanden sind.

Dies ist ein sehr häufiges Muster in React. Weitere Informationen finden Sie unter den offiziellen Dokumenten.

1
jered 8 Feb. 2020 im 05:17

Sie können es einfach in eine Funktion einfügen, wie Sie denken, aber Sie brauchen das React.createElement nicht. So etwas würde ausreichen:

class TimeStepDisplayGraph extends React.Component {
  ...
  render () {
      return (
        <div id={ this.props.id }>
          {createGraphNode()}
        </div>
      )
    }
  }
  ...
}

function createGraphNode() {
  return <TimeStepDisplayGraphNode class="graphNodeStyles"/>;
}

Oder um es n mal hinzuzufügen, so etwas wie:

class TimeStepDisplayGraph extends React.Component {
  ...
  render () {
      return (
        <div id={ this.props.id }>
          {Array.from({ length: n }, createGraphNode)}
        </div>
      )
    }
  }
  ...
}

function createGraphNode(_, index) {
  return <TimeStepDisplayGraphNode key={index} class="graphNodeStyles"/>;
}

Hast du das gedacht?

1
Eric F. 8 Feb. 2020 im 05:23

Ja, Muhammad hat recht. So verwenden Sie eine Schleife, um das zu tun, was Sie verlangen:

class outerComponent extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      numberOfTimestamps: 100000  // (just kidding, make that smaller!)
    }
  }
  render () {
    let myTimestamps = []
    for (let i=0; i < this.state.numberOfTimestamps; i++) {
      myTimestamps.push(<TimeStepDisplayGraphNode class="graphNodeStyles"/>)
    }
    return (
      <div>
        {myTimestamps}
      </div>
    )
  }
}

Bearbeiten: Geändert zu for-Schleife und nicht zu forEach. Kann nicht für jede Nummer!

0
Sydney Y 8 Feb. 2020 im 05:28