freeCodeCamp/review-using-props-with-stateless-functional-components.md at 873fce02a2d2124f3b76ce3f317fb29b34abb542

Files

Oliver Eyton-Williams dec409a4bd fix: s/localeTitle/title/g

2020-10-06 23:10:08 +05:30

4.0 KiB

Raw Blame History

id, challengeType, forumTopicId, title

id	challengeType	forumTopicId	title
5a24c314108439a4d403616f	6	301411	复习如何使用 Props 和无状态函数组件

Description

除了上一个挑战，你一直在将 props 传递给无状态的函数组件。这些组件就像纯函数，它们接收 props 作为输入，并在每次传递相同 props 时返回相同的视图。你可能会想知道什么是状态，下一个挑战将会更详细地讲述它。在此之前，我们先来回顾一下组件的术语。 无状态函数组件是一个函数，它接收 props 作为输入并返回 JSX。另一方面，无状态组件是一个类，它扩展了React.Component，但是不使用内部状态（下一个挑战中讨论）。最后，状态组件是指维护其自身内部状态的组件，它简称组件或 React 组件。一种常见的应用模式是尽可能减少状态组件并创建无状态的函数组件。这有助于将状态管理包含到应用程序的特定区域。反过来，通过更容易地跟踪状态变化如何影响其行为，可以改进应用程序的开发和维护。

Instructions

在代码编辑器中有一个CampSite组件，它把Camper组件渲染为自己的子组件。定义Camper组件，并为其分配默认 props{ name: 'CamperBot' }。你可以在Camper组件内部渲染任何你想要的代码，但是要确保有一个p元素，它只包含作为prop传递的name值。最后，在Camper组件上定义propTypes，要求提供name作为 prop，并验证它是string类型。

Tests

tests:
  - text: 应该渲染<code>CampSite</code>组件。
    testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find('CampSite').length === 1; })());
  - text: 应该渲染<code>Camper</code>组件。
    testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find('Camper').length === 1; })());
  - text: <code>Camper</code>组件应该包含默认 props，它将字符串<code>CamperBot</code>赋值给关键字<code>name</code>。
    testString: assert(/Camper.defaultProps={name:(['"`])CamperBot\1,?}/.test(code.replace(/\s/g, '')));
  - text: <code>Camper</code>组件应该包含<code>string</code>类型的<code>name</code>prop。
    testString: assert(/Camper.propTypes={name:PropTypes.string.isRequired,?}/.test(code.replace(/\s/g, '')));
  - text: <code>Camper</code>组件应该包含一个<code>p</code>元素，元素内是来自prop<code>name</code>的唯一文本。
    testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find('p').text() === mockedComponent.find('Camper').props().name; })());

Challenge Seed

class CampSite extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <Camper/>
      </div>
    );
  }
};
// change code below this line

Before Test

var PropTypes = {
   string: { isRequired: true }
};

After Test

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

Solution

class CampSite extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <Camper/>
      </div>
    );
  }
};
// change code below this line

const Camper = (props) => {
   return (
     <div>
       <p>{props.name}</p>
     </div>
   );
};

Camper.propTypes = {
  name: PropTypes.string.isRequired
};

Camper.defaultProps = {
  name: 'CamperBot'
};

4.0 KiB Raw Blame History Unescape Escape