2.8 KiB

Raw Blame History

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036163	Erstelle eine React-Komponente	6	301386	create-a-react-component

--description--

Die andere Möglichkeit, eine React-Komponente zu definieren, ist die ES6 class-Syntax. Im folgenden Beispiel erweitert Kitten React.Component:

class Kitten extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <h1>Hi</h1>
    );
  }
}

Dadurch wird eine ES6-Klasse Kitten erstellt, die die Klasse React.Component erweitert. So hat die Klasse Kitten jetzt Zugriff auf viele nützliche React-Funktionen, wie lokale Zustände und Lifecycle-Hooks. Mach dir keine Sorgen, wenn du mit diesen Begriffen noch nicht vertraut bist, sie werden in späteren Aufgaben ausführlicher behandelt. Beachte auch, dass die Klasse Kitten einen constructor hat, der super() aufruft. Sie verwendet super(), um den Konstruktor der Elternklasse aufzurufen, in diesem Fall React.Component. Der Konstruktor ist eine spezielle Methode, die bei der Initialisierung von Objekten verwendet wird, die mit dem Schlüsselwort class erstellt werden. Am besten rufst du den constructor einer Komponente mit super auf und übergibst props an beide. Dadurch wird sichergestellt, dass die Komponente richtig initialisiert wird. Du solltest wissen, dass es Standard ist, dass dieser Code enthalten ist. Bald wirst du auch andere Verwendungsmöglichkeiten für den Konstruktor und die props sehen.

--instructions--

MyComponent wird im Code-Editor mit der Klassensyntax definiert. Schreibe die Methode render fertig, damit sie ein div-Element zurückgibt, das ein h1 mit dem Text Hello React! enthält.

--hints--

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

assert(Enzyme.shallow(React.createElement(MyComponent)).type() === 'div');

Das zurückgegebene div sollte ein h1-Überschriftenelement enthalten.

assert(
  /<div><h1>.*<\/h1><\/div>/.test(
    Enzyme.shallow(React.createElement(MyComponent)).html()
  )
);

Das h1-Überschriftenelement sollte den String Hello React! enthalten.

assert(
  Enzyme.shallow(React.createElement(MyComponent)).html() ===
    '<div><h1>Hello React!</h1></div>'
);

--seed--

--after-user-code--

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

--seed-contents--

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    // Change code below this line



    // Change code above this line
  }
};

--solutions--

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    // Change code below this line
    return (
      <div>
        <h1>Hello React!</h1>
      </div>
    );
    // Change code above this line
  }
};

2.8 KiB Raw Blame History