freeCodeCamp/curriculum/challenges/german/03-front-end-development-libraries/react/access-props-using-this.props.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d403616e	Zugriff auf Eigenschaften mit this.props	6	301375	access-props-using-this-props

--description--

In den letzten Aufgaben ging es um die grundlegenden Möglichkeiten, Eigenschaften an Kindkomponenten zu übergeben. Was aber, wenn die Kindkomponente, der du eine Eigenschaft übergibst, eine ES6-Klassenkomponente ist und nicht eine zustandslose funktionale Komponente? Die ES6-Klassenkomponente verwendet eine etwas andere Konvention für den Zugriff auf Eigenschaften.

Immer wenn du dich auf eine Klassenkomponente innerhalb ihrer selbst beziehst, verwendest du das Schlüsselwort this. Um auf Eigenschaften innerhalb einer Klassenkomponente zuzugreifen, stellst du dem Code, mit dem du auf sie zugreifst, this voran. Wenn eine ES6-Klassenkomponente zum Beispiel eine Eigenschaft namens data hat, schreibst du {this.props.data} in JSX.

--instructions--

Rendere eine Instanz der Komponente Welcome in der Elternkomponente App. Hier gibst du Welcome eine Eigenschaft name und weist ihm einen Wert eines Strings zu. Innerhalb des Kindes Welcome greifst du auf die Eigenschaft name innerhalb des strong-Tags zu.

--hints--

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

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(App));
    return mockedComponent.children().type() === 'div';
  })()
);

Das Kind von App sollte die Komponente Welcome sein.

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(App));
    return (
      mockedComponent.children().childAt(0).name() === 'Welcome'
    );
  })()
);

Die Komponente Welcome sollte eine Eigenschaft namens name besitzen.

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(App));
    return mockedComponent.find('Welcome').props().name;
  })()
);

Die Komponente Welcome sollte den String, den du als Eigenschaft name übergibst, innerhalb des strong-Tags anzeigen.

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(App));
    return (
      mockedComponent.find('strong').text() ===
      mockedComponent.find('Welcome').props().name
    );
  })()
);

--seed--

--after-user-code--

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

--seed-contents--

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

  }
  render() {
    return (
        <div>
            { /* Change code below this line */ }
            <Welcome />
            { /* Change code above this line */ }
        </div>
    );
  }
};

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

  }
  render() {
    return (
        <div>
          { /* Change code below this line */ }
          <p>Hello, <strong></strong>!</p>
          { /* Change code above this line */ }
        </div>
    );
  }
};

--solutions--

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

  }
  render() {
    return (
        <div>
          { /* Change code below this line */ }
          <p>Hello, <strong>{this.props.name}</strong>!</p>
          { /* Change code above this line */ }
        </div>
    );
  }
};

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

  }
  render() {
    return (
        <div>
            { /* Change code below this line */ }
            <Welcome name="Quincy"/>
            { /* Change code above this line */ }
        </div>
    );
  }
};