3.6 KiB

Raw Blame History

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036164	Eine Komponente mit Komposition erstellen	6	301383	create-a-component-with-composition

--description--

Jetzt schauen wir uns an, wie wir mehrere React-Komponenten zusammensetzen können. Stell dir vor, du baust eine App und hast drei Komponenten erstellt: eine Navbar, Dashboard und Footer.

Um diese Komponenten zusammenzustellen, könntest du eine App Elternkomponente erstellen, die jede dieser drei Komponenten als Kinderkomponente wiedergibt. Um eine Komponente als Kind in einer React-Komponente darzustellen, fügst du den Komponentennamen als benutzerdefinierten HTML-Tag in die JSX ein. Zum Beispiel könntest du in der Methode render schreiben:

return (
 <App>
  <Navbar />
  <Dashboard />
  <Footer />
 </App>
)

Wenn React auf ein benutzerdefiniertes HTML-Tag stößt, das auf eine andere Komponente verweist (ein Komponentenname, der wie in diesem Beispiel in < /> eingeschlossen ist), wird das Markup für diese Komponente an der Stelle des Tags gerendert. Dies soll die Eltern/Kind-Beziehung zwischen der App-Komponente und der Navbar, dem Dashboard und dem Footer verdeutlichen.

--instructions--

Im Code-Editor gibt es eine einfache funktionale Komponente namens ChildComponent und eine Klassenkomponente namens ParentComponent. Setze die beiden zusammen, indem du die Kinderkomponente (ChildComponent) innerhalb der Elternkomponente (ParentComponent) renderst. Achte darauf, dass du den ChildComponent-Tag mit einem Schrägstrich schließt.

Hinweis: ChildComponent wird mit einer ES6-Pfeilfunktion (arrow function) definiert, weil dies eine sehr gängige Praxis bei der Verwendung von React ist. Du solltest aber wissen, dass dies nur eine Funktion ist. Wenn du mit der Syntax der Pfeilfunktion nicht vertraut bist, sieh dir bitte den Abschnitt über JavaScript an.

--hints--

Die React-Komponente sollte ein einzelnes div-Element zurückgeben.

assert(
  (function () {
    var shallowRender = Enzyme.shallow(React.createElement(ParentComponent));
    return shallowRender.type() === 'div';
  })()
);

Die Komponente sollte zwei verschachtelte Elemente zurückgeben.

assert(
  (function () {
    var shallowRender = Enzyme.shallow(React.createElement(ParentComponent));
    return shallowRender.children().length === 2;
  })()
);

Die Komponente sollte die ChildComponent als ihr zweites Kind zurückgeben.

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(ParentComponent));
    return (
      mockedComponent.find('ParentComponent').find('ChildComponent').length ===
      1
    );
  })()
);

--seed--

--after-user-code--

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

--seed-contents--

const ChildComponent = () => {
  return (
    <div>
      <p>I am the child</p>
    </div>
  );
};

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>I am the parent</h1>
        { /* Change code below this line */ }


        { /* Change code above this line */ }
      </div>
    );
  }
};

--solutions--

const ChildComponent = () => {
  return (
    <div>
      <p>I am the child</p>
    </div>
  );
};

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>I am the parent</h1>
        { /* Change code below this line */ }
        <ChildComponent />
        { /* Change code above this line */ }
      </div>
    );
  }
};

3.6 KiB Raw Blame History