Skip to content

Commit

Permalink
fix: update react proptypes lesson description (#37477)
Browse files Browse the repository at this point in the history
  • Loading branch information
zweimach authored and Manish-Giri committed Nov 5, 2019
1 parent add5e53 commit 734b794
Show file tree
Hide file tree
Showing 5 changed files with 5 additions and 5 deletions.
Expand Up @@ -8,7 +8,7 @@ localeTitle: 使用PropTypes定义您期望的道具
---

## Description
<section id="description"> React提供了有用的类型检查功能,以验证组件是否接收到正确类型的道具。例如,您的应用程序进行API调用以检索您希望在数组中的数据,然后将其作为prop传递给组件。您可以在组件上设置<code>propTypes</code> ,以要求数据类型为<code>array</code> 。当数据是任何其他类型时,这将抛出有用的警告。当您提前知道道具类型时,设置<code>propTypes</code>被认为是最佳做法。您可以使用与定义<code>defaultProps</code>相同的方式为组件定义<code>propTypes</code>属性。这样做将检查给定键的道具是否存在给定类型。这是一个需要类型<code>function</code>的例子,名为<code>handleClick</code> : <code>MyComponent.propTypes = { handleClick: PropTypes.func.isRequired }</code>在上面的例子中, <code>PropTypes.func</code>部分检查<code>handleClick</code>是一个函数。添加<code>isRequired</code>告诉React <code>handleClick</code>是该组件的必需属性。如果未提供支柱,您将看到警告。还要注意<code>func</code>代表<code>function</code> 。在七种JavaScript原语类型中, <code>function</code>和<code>boolean</code> (写为<code>bool</code> )是唯一使用异常拼写的两种类型。除了原始类型,还有其他类型可用。例如,您可以检查prop是否为React元素。有关所有选项,请参阅文档。 <strong>注意:</strong>从React v15.5.0开始, <code>PropTypes</code>独立于React <code>import React, { PropTypes } from &#39;react&#39;;</code> ,如下所示: <code>import React, { PropTypes } from &#39;react&#39;;</code> </section>
<section id="description"> React提供了有用的类型检查功能,以验证组件是否接收到正确类型的道具。例如,您的应用程序进行API调用以检索您希望在数组中的数据,然后将其作为prop传递给组件。您可以在组件上设置<code>propTypes</code> ,以要求数据类型为<code>array</code> 。当数据是任何其他类型时,这将抛出有用的警告。当您提前知道道具类型时,设置<code>propTypes</code>被认为是最佳做法。您可以使用与定义<code>defaultProps</code>相同的方式为组件定义<code>propTypes</code>属性。这样做将检查给定键的道具是否存在给定类型。这是一个需要类型<code>function</code>的例子,名为<code>handleClick</code> : <code>MyComponent.propTypes = { handleClick: PropTypes.func.isRequired }</code>在上面的例子中, <code>PropTypes.func</code>部分检查<code>handleClick</code>是一个函数。添加<code>isRequired</code>告诉React <code>handleClick</code>是该组件的必需属性。如果未提供支柱,您将看到警告。还要注意<code>func</code>代表<code>function</code> 。在七种JavaScript原语类型中, <code>function</code>和<code>boolean</code> (写为<code>bool</code> )是唯一使用异常拼写的两种类型。除了原始类型,还有其他类型可用。例如,您可以检查prop是否为React元素。有关所有选项,请参阅文档。 <strong>注意:</strong>从React v15.5.0开始, <code>PropTypes</code>独立于React <code>import PropTypes from &#39;prop-types&#39;;</code> ,如下所示: <code>import PropTypes from &#39;prop-types&#39;;</code> </section>

## Instructions
<section id="instructions">为<code>Items</code>组件定义<code>propTypes</code>以要求<code>quantity</code>作为prop并验证它是否为<code>number</code>类型。 </section>
Expand Down
Expand Up @@ -15,7 +15,7 @@ It's considered a best practice to set <code>propTypes</code> when you know the
In the example above, the <code>PropTypes.func</code> part checks that <code>handleClick</code> is a function. Adding <code>isRequired</code> tells React that <code>handleClick</code> is a required property for that component. You will see a warning if that prop isn't provided. Also notice that <code>func</code> represents <code>function</code>. Among the seven JavaScript primitive types, <code>function</code> and <code>boolean</code> (written as <code>bool</code>) are the only two that use unusual spelling. In addition to the primitive types, there are other types available. For example, you can check that a prop is a React element. Please refer to the [documentation](https://reactjs.org/docs/jsx-in-depth.html#specifying-the-react-element-type) for all of the options.

<strong>Note:</strong> As of React v15.5.0, <code>PropTypes</code> is imported independently from React, like this:
<code>import React, { PropTypes } from 'react';</code>
<code>import PropTypes from 'prop-types';</code>
</section>

## Instructions
Expand Down
Expand Up @@ -8,7 +8,7 @@ localeTitle: Use PropTypes para definir os suportes que você espera
---

## Description
<section id="description"> O React fornece recursos úteis de verificação de tipos para verificar se os componentes recebem props do tipo correto. Por exemplo, seu aplicativo faz uma chamada de API para recuperar dados que você espera estar em uma matriz, que é então passada para um componente como um prop. Você pode definir <code>propTypes</code> no seu componente para exigir que os dados sejam do tipo <code>array</code> . Isso lançará um aviso útil quando os dados forem de qualquer outro tipo. É considerado uma boa prática definir <code>propTypes</code> quando você conhece o tipo de suporte antes do tempo. Você pode definir uma propriedade <code>propTypes</code> para um componente da mesma maneira que definiu <code>defaultProps</code> . Fazendo isso, você verifica se os objetos de uma determinada chave estão presentes em um determinado tipo. Aqui está um exemplo para requerer a <code>function</code> type para um <code>handleClick</code> chamado <code>handleClick</code> : <code>MyComponent.propTypes = { handleClick: PropTypes.func.isRequired }</code> No exemplo acima, a parte <code>PropTypes.func</code> verifica que <code>handleClick</code> é uma função. Adicionando <code>isRequired</code> diz React que <code>handleClick</code> é uma propriedade necessária para esse componente. Você verá um aviso se esse suporte não for fornecido. Observe também que <code>func</code> representa a <code>function</code> . Entre os sete tipos primitivos de JavaScript, <code>function</code> e <code>boolean</code> (escrito como <code>bool</code> ) são os dois únicos que usam ortografia incomum. Além dos tipos primitivos, existem outros tipos disponíveis. Por exemplo, você pode verificar se um prop é um elemento React. Por favor, consulte a documentação de todas as opções. <strong>Nota:</strong> A partir do React v15.5.0, <code>PropTypes</code> é importado independentemente do React, desta forma: <code>import React, { PropTypes } from &#39;react&#39;;</code> </section>
<section id="description"> O React fornece recursos úteis de verificação de tipos para verificar se os componentes recebem props do tipo correto. Por exemplo, seu aplicativo faz uma chamada de API para recuperar dados que você espera estar em uma matriz, que é então passada para um componente como um prop. Você pode definir <code>propTypes</code> no seu componente para exigir que os dados sejam do tipo <code>array</code> . Isso lançará um aviso útil quando os dados forem de qualquer outro tipo. É considerado uma boa prática definir <code>propTypes</code> quando você conhece o tipo de suporte antes do tempo. Você pode definir uma propriedade <code>propTypes</code> para um componente da mesma maneira que definiu <code>defaultProps</code> . Fazendo isso, você verifica se os objetos de uma determinada chave estão presentes em um determinado tipo. Aqui está um exemplo para requerer a <code>function</code> type para um <code>handleClick</code> chamado <code>handleClick</code> : <code>MyComponent.propTypes = { handleClick: PropTypes.func.isRequired }</code> No exemplo acima, a parte <code>PropTypes.func</code> verifica que <code>handleClick</code> é uma função. Adicionando <code>isRequired</code> diz React que <code>handleClick</code> é uma propriedade necessária para esse componente. Você verá um aviso se esse suporte não for fornecido. Observe também que <code>func</code> representa a <code>function</code> . Entre os sete tipos primitivos de JavaScript, <code>function</code> e <code>boolean</code> (escrito como <code>bool</code> ) são os dois únicos que usam ortografia incomum. Além dos tipos primitivos, existem outros tipos disponíveis. Por exemplo, você pode verificar se um prop é um elemento React. Por favor, consulte a documentação de todas as opções. <strong>Nota:</strong> A partir do React v15.5.0, <code>PropTypes</code> é importado independentemente do React, desta forma: <code>import PropTypes from &#39;prop-types&#39;;</code> </section>

## Instructions
<section id="instructions"> Defina <code>propTypes</code> para o componente <code>Items</code> para exigir <code>quantity</code> como um prop e verifique se é do tipo <code>number</code> . </section>
Expand Down
Expand Up @@ -9,7 +9,7 @@ localeTitle: Используйте PropTypes для определения ре

## Description
<section id='description'>
React предоставляет полезные функции проверки типов для проверки того, что компоненты получают реквизиты правильного типа. Например, ваше приложение вызывает вызов API для извлечения данных, которые вы ожидаете в массиве, который затем передается компоненту в качестве опоры. Вы можете установить <code>propTypes</code> на свой компонент, чтобы требовать, чтобы данные имели тип <code>array</code> . Это даст полезное предупреждение, когда данные относятся к любому другому типу. Рекомендуется использовать <code>propTypes</code> когда вы <code>propTypes</code> знаете тип пропеллера. Вы можете определить свойство <code>propTypes</code> для компонента так же, как вы определили <code>defaultProps</code> . При этом будет проверяться наличие реквизита данного ключа с заданным типом. Вот пример, требующий <code>function</code> типа для prop, называемого <code>handleClick</code> : <code>MyComponent.propTypes = { handleClick: PropTypes.func.isRequired }</code> В приведенном выше <code>PropTypes.func</code> часть <code>PropTypes.func</code> проверяет, что <code>handleClick</code> является функцией. Добавление <code>isRequired</code> говорит React, что <code>handleClick</code> является обязательным свойством для этого компонента. Вы увидите предупреждение, если эта поддержка не указана. Также обратите внимание, что <code>func</code> представляет <code>function</code> . Среди семи простых примитивов JavaScript <code>function</code> и <code>boolean</code> (написанное как <code>bool</code> ) - это только два, которые используют необычную орфографию. В дополнение к примитивным типам доступны другие типы. Например, вы можете проверить, что опорный элемент является элементом React. Пожалуйста, обратитесь к документации по всем параметрам. <strong>Примечание.</strong> Начиная с версии React v15.5.0, <code>PropTypes</code> импортируется независимо от React, например: <code>import React, { PropTypes } from &#39;react&#39;;</code>
React предоставляет полезные функции проверки типов для проверки того, что компоненты получают реквизиты правильного типа. Например, ваше приложение вызывает вызов API для извлечения данных, которые вы ожидаете в массиве, который затем передается компоненту в качестве опоры. Вы можете установить <code>propTypes</code> на свой компонент, чтобы требовать, чтобы данные имели тип <code>array</code> . Это даст полезное предупреждение, когда данные относятся к любому другому типу. Рекомендуется использовать <code>propTypes</code> когда вы <code>propTypes</code> знаете тип пропеллера. Вы можете определить свойство <code>propTypes</code> для компонента так же, как вы определили <code>defaultProps</code> . При этом будет проверяться наличие реквизита данного ключа с заданным типом. Вот пример, требующий <code>function</code> типа для prop, называемого <code>handleClick</code> : <code>MyComponent.propTypes = { handleClick: PropTypes.func.isRequired }</code> В приведенном выше <code>PropTypes.func</code> часть <code>PropTypes.func</code> проверяет, что <code>handleClick</code> является функцией. Добавление <code>isRequired</code> говорит React, что <code>handleClick</code> является обязательным свойством для этого компонента. Вы увидите предупреждение, если эта поддержка не указана. Также обратите внимание, что <code>func</code> представляет <code>function</code> . Среди семи простых примитивов JavaScript <code>function</code> и <code>boolean</code> (написанное как <code>bool</code> ) - это только два, которые используют необычную орфографию. В дополнение к примитивным типам доступны другие типы. Например, вы можете проверить, что опорный элемент является элементом React. Пожалуйста, обратитесь к документации по всем параметрам. <strong>Примечание.</strong> Начиная с версии React v15.5.0, <code>PropTypes</code> импортируется независимо от React, например: <code>import PropTypes from &#39;prop-types&#39;;</code>
</section>

## Instructions
Expand Down
Expand Up @@ -8,7 +8,7 @@ localeTitle: Use PropTypes para definir los beneficios que espera
---

## Description
<section id="description"> React proporciona funciones útiles de verificación de tipos para verificar que los componentes reciban accesorios del tipo correcto. Por ejemplo, su aplicación realiza una llamada a la API para recuperar datos que espera estar en una matriz, que luego se pasa a un componente como prop. Puede establecer <code>propTypes</code> en su componente para requerir que los datos sean de tipo <code>array</code> . Esto arrojará una advertencia útil cuando los datos sean de cualquier otro tipo. Se considera una buena práctica establecer los <code>propTypes</code> cuando conoce el tipo de accesorio con anticipación. Puede definir una propiedad <code>propTypes</code> para un componente de la misma manera que definió <code>defaultProps</code> . Al hacer esto se verificará que los accesorios de una clave dada estén presentes con un tipo dado. Aquí hay un ejemplo para requerir la <code>function</code> tipo para un prop llamado <code>handleClick</code> : <code>MyComponent.propTypes = { handleClick: PropTypes.func.isRequired }</code> En el ejemplo anterior, la parte <code>PropTypes.func</code> verifica que <code>handleClick</code> es una función. Agregar <code>isRequired</code> le dice a React que <code>handleClick</code> es una propiedad requerida para ese componente. Verá una advertencia si no se proporciona ese apoyo. También note que <code>func</code> representa la <code>function</code> . Entre los siete tipos primitivos de JavaScript, <code>function</code> y <code>boolean</code> (escrito como <code>bool</code> ) son los únicos dos que utilizan una ortografía inusual. Además de los tipos primitivos, hay otros tipos disponibles. Por ejemplo, puedes verificar que un prop es un elemento React. Por favor, consulte la documentación para todas las opciones. <strong>Nota:</strong> A partir de React v15.5.0, <code>PropTypes</code> se importa independientemente de React, de la siguiente manera: <code>import React, { PropTypes } from &#39;react&#39;;</code> </section>
<section id="description"> React proporciona funciones útiles de verificación de tipos para verificar que los componentes reciban accesorios del tipo correcto. Por ejemplo, su aplicación realiza una llamada a la API para recuperar datos que espera estar en una matriz, que luego se pasa a un componente como prop. Puede establecer <code>propTypes</code> en su componente para requerir que los datos sean de tipo <code>array</code> . Esto arrojará una advertencia útil cuando los datos sean de cualquier otro tipo. Se considera una buena práctica establecer los <code>propTypes</code> cuando conoce el tipo de accesorio con anticipación. Puede definir una propiedad <code>propTypes</code> para un componente de la misma manera que definió <code>defaultProps</code> . Al hacer esto se verificará que los accesorios de una clave dada estén presentes con un tipo dado. Aquí hay un ejemplo para requerir la <code>function</code> tipo para un prop llamado <code>handleClick</code> : <code>MyComponent.propTypes = { handleClick: PropTypes.func.isRequired }</code> En el ejemplo anterior, la parte <code>PropTypes.func</code> verifica que <code>handleClick</code> es una función. Agregar <code>isRequired</code> le dice a React que <code>handleClick</code> es una propiedad requerida para ese componente. Verá una advertencia si no se proporciona ese apoyo. También note que <code>func</code> representa la <code>function</code> . Entre los siete tipos primitivos de JavaScript, <code>function</code> y <code>boolean</code> (escrito como <code>bool</code> ) son los únicos dos que utilizan una ortografía inusual. Además de los tipos primitivos, hay otros tipos disponibles. Por ejemplo, puedes verificar que un prop es un elemento React. Por favor, consulte la documentación para todas las opciones. <strong>Nota:</strong> A partir de React v15.5.0, <code>PropTypes</code> se importa independientemente de React, de la siguiente manera: <code>import PropTypes from &#39;prop-types&#39;;</code> </section>

## Instructions
<section id="instructions"> Defina <code>propTypes</code> para que el componente <code>Items</code> requiera <code>quantity</code> como prop y verifique que sea de tipo <code>number</code> . </section>
Expand Down

0 comments on commit 734b794

Please sign in to comment.