freeCodeCamp/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/review-using-props-with-stateless-functional-components.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d403616f	複習使用無狀態函數組件的 Props	6	301411	review-using-props-with-stateless-functional-components

--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 類型。

--hints--

應該渲染 CampSite 組件。

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

應該渲染 Camper 組件。

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

Camper 組件應該包含默認 props，它將字符串 CamperBot 賦值給關鍵字 name。

assert(
  /Camper.defaultProps={name:(['"`])CamperBot\1,?}/.test(
    __helpers.removeWhiteSpace(code)
  )
);

Camper 組件應該包含 string 類型的 name prop。

assert(
  /Camper.propTypes={name:PropTypes.string.isRequired,?}/.test(
    __helpers.removeWhiteSpace(code)
  )
);

Camper 組件應該包含 p 元素，元素的文本是 prop 的 name。

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(CampSite));
    return (
      mockedComponent.find('p').text() ===
      mockedComponent.find('Camper').props().name
    );
  })()
);

--seed--

--before-user-code--

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

--after-user-code--

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

--seed-contents--

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

--solutions--

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