freeCodeCamp/use-default-props.md at 873fce02a2d2124f3b76ce3f317fb29b34abb542

Files

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

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

2.2 KiB

Raw Blame History

id, challengeType, forumTopicId, title

id	challengeType	forumTopicId	title
5a24c314108439a4d403616b	6	301418	使用默认的 Props

Description

React 还有一个设置默认 props 的选项。你可以将默认 props 作为组件本身的属性分配给组件，React 会在必要时分配默认 prop。如果没有显式的提供任何值，这允许你指定 prop 值应该是什么。例如，如果你声明MyComponent.defaultProps = { location: 'San Francisco' }，即定义一个 location 属性，并且其值在没有另行制定的情况下被设置为字符串San Francisco。如果 props 未定义，则 React 会分配默认 props，但如果你将null作为 prop 的值，它将保持null。

Instructions

代码编辑器中有一个ShoppingCart组件。在这个组件上定义默认 props，它指定一个itemsprop，其值为0。

Tests

tests:
  - text: 应该渲染<code>ShoppingCart</code>组件。
    testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('ShoppingCart').length === 1; })());
  - text: '<code>ShoppingCart</code>组件应该有一个<code>{ items: 0 }</code>的默认 prop。'
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); mockedComponent.setProps({items: undefined}); return mockedComponent.find(''ShoppingCart'').props().items === 0; })());'

Challenge Seed

const ShoppingCart = (props) => {
  return (
    <div>
      <h1>Shopping Cart Component</h1>
    </div>
  )
};
// change code below this line

After Test

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

Solution

const ShoppingCart = (props) => {
  return (
    <div>
      <h1>Shopping Cart Component</h1>
    </div>
  )
};

// change code below this line
ShoppingCart.defaultProps = {
  items: 0
}

2.2 KiB Raw Blame History Unescape Escape