* chore: rename APIs and Microservices to include "Backend" (#42515) * fix typo * fix typo * undo change * Corrected grammar mistake Corrected a grammar mistake by removing a comma. * change APIs and Microservices cert title * update title * Change APIs and Microservices certi title * Update translations.json * update title * feat(curriculum): rename apis and microservices cert * rename folder structure * rename certificate * rename learn Markdown * apis-and-microservices -> back-end-development-and-apis * update backend meta * update i18n langs and cypress test Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * fix: add development to front-end libraries (#42512) * fix: added-the-word-Development-to-front-end-libraries * fix/added-the-word-Development-to-front-end-libraries * fix/added-word-development-to-front-end-libraries-in-other-related-files * fix/added-the-word-Development-to-front-end-and-all-related-files * fix/removed-typos-from-last-commit-in-index.md * fix/reverted-changes-that-i-made-to-dependecies * fix/removed xvfg * fix/reverted changes that i made to package.json * remove unwanted changes * front-end-development-libraries changes * rename backend certSlug and README * update i18n folder names and keys * test: add legacy path redirect tests This uses serve.json from the client-config repo, since we currently use that in production * fix: create public dir before moving serve.json * fix: add missing script * refactor: collect redirect tests * test: convert to cy.location for stricter tests * rename certificate folder to 00-certificates * change crowdin config to recognise new certificates location * allow translations to be used Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> * add forwards slashes to path redirects * fix cypress path tests again * plese cypress * fix: test different challenge Okay so I literally have no idea why this one particular challenge fails in Cypress Firefox ONLY. Tom and I paired and spun a full build instance and confirmed in Firefox the page loads and redirects as expected. Changing to another bootstrap challenge passes Cypress firefox locally. Absolutely boggled by this. AAAAAAAAAAAAAAA * fix: separate the test Okay apparently the test does not work unless we separate it into a different `it` statement. >:( >:( >:( >:( Co-authored-by: Sujal Gupta <55016909+heysujal@users.noreply.github.com> Co-authored-by: Noor Fakhry <65724923+NoorFakhry@users.noreply.github.com> Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>
3.6 KiB
3.6 KiB
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'
};