Files

camperbot 5c868af2b8 chore(i18n,learn): processed translations (#44851 )

2022-01-20 20:30:18 +01:00

3.9 KiB

Raw Permalink Blame History

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d403616e	this.props を使用して props にアクセスする	6	301375	access-props-using-this-props

--description--

前のいくつかのチャレンジでは、子コンポーネントに props を渡す基本的な方法について説明しました。しかし、props に渡そうとしている子コンポーネントが、ステートレス関数型コンポーネントではなく、ES6 クラスコンポーネントである場合はどうでしょうか？ ES6 クラスコンポーネントでは、props にアクセスするために多少異なる規約を使用します。

クラスコンポーネント自体を参照するときはいつでも、this キーワードを使用します。クラスコンポーネント内の props にアクセスするには、アクセスに使用するコードの前に this を置きます。たとえば、ES6 クラスコンポーネントに data という prop がある場合、JSX では {this.props.data} と記述します。

--instructions--

親コンポーネント App にある Welcome コンポーネントのインスタンスをレンダーしてください。ここでは、Welcome に name という prop を付け、文字列の値を割り当ててください。子要素 Welcome の中で、strong タグ内の name prop にアクセスしてください。

--hints--

App コンポーネントは単一の div 要素を返す必要があります。

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

App の子要素は Welcome コンポーネントである必要があります。

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

Welcome コンポーネントには name という prop を持たせる必要があります。

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

Welcome コンポーネントで、name prop として渡した文字列を strong タグ内に表示する必要があります。

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>
    );
  }
};

3.9 KiB Raw Permalink Blame History