diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md
index 9034ba9dc..bcf751ec7 100644
--- a/content/docs/typechecking-with-proptypes.md
+++ b/content/docs/typechecking-with-proptypes.md
@@ -1,18 +1,18 @@
---
id: typechecking-with-proptypes
-title: Typechecking With PropTypes
+title: Sprawdzeniem typów z wykorzystaniem PropTypes
permalink: docs/typechecking-with-proptypes.html
redirect_from:
- "docs/react-api.html#typechecking-with-proptypes"
---
-> Note:
+> Uwaga:
>
-> `React.PropTypes` has moved into a different package since React v15.5. Please use [the `prop-types` library instead](https://www.npmjs.com/package/prop-types).
+> Z wersją React v15.5 `React.PropTypes` zostało przeniesione do innej paczki. Zamiast importować z paczki Reacta, używaj [biblioteki `prop-types`](https://www.npmjs.com/package/prop-types).
>
->We provide [a codemod script](/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes) to automate the conversion.
+> Dla ułatwienia migracji przygotowaliśmy [skrypt codemod](/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes).
-As your app grows, you can catch a lot of bugs with typechecking. For some applications, you can use JavaScript extensions like [Flow](https://flow.org/) or [TypeScript](https://www.typescriptlang.org/) to typecheck your whole application. But even if you don't use those, React has some built-in typechecking abilities. To run typechecking on the props for a component, you can assign the special `propTypes` property:
+Wraz ze wzrostem twojej aplikacji możesz wyłapywać więcej błędów, korzystając ze sprawdzania typów. Dla niektórych aplikacji możesz korzystać z rozszerzeń JavaScriptu do sprawdzenia typów w całej aplikacji, takich jak [Flow](https://flow.org/) lub [TypeScript](https://www.typescriptlang.org/). Nawet jeśli z nich nie korzystasz, możesz skorzystać ze sprawdzania typów wbudowanego w Reacta. By rozpocząć sprawdzanie typów właściwości w komponencie, możesz dodać do komponentu specjalną właściwość `propTypes`.
```javascript
import PropTypes from 'prop-types';
@@ -20,7 +20,7 @@ import PropTypes from 'prop-types';
class Greeting extends React.Component {
render() {
return (
-
Hello, {this.props.name}
+ Witaj, {this.props.name}
);
}
}
@@ -29,19 +29,18 @@ Greeting.propTypes = {
name: PropTypes.string
};
```
-
-`PropTypes` exports a range of validators that can be used to make sure the data you receive is valid. In this example, we're using `PropTypes.string`. When an invalid value is provided for a prop, a warning will be shown in the JavaScript console. For performance reasons, `propTypes` is only checked in development mode.
+`PropTypes` eksportuje walidatory, które mogą być używane do sprawdzania poprawności danych wejściowych. W tym przypadku wykorzystujemy `PropTypes.string`. Kiedy wartość przekazanej właściwości będzie nieprawidłowego typu, zostanie wyświetlone ostrzeżenie w konsoli javascriptowej. Ze względu na wydajność, `propTypes` są sprawdzane tylko w trybie deweloperskim.
### PropTypes {#proptypes}
-Here is an example documenting the different validators provided:
+Oto przykład dokumentujący różne dostarczone walidatory:
```javascript
import PropTypes from 'prop-types';
MyComponent.propTypes = {
- // You can declare that a prop is a specific JS type. By default, these
- // are all optional.
+ // Możesz zadeklarować, że właściwość będzie określonego typu javascriptowego.
+ // Domyślnie, wszystkie są opcjonalne
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
@@ -50,94 +49,92 @@ MyComponent.propTypes = {
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
- // Anything that can be rendered: numbers, strings, elements or an array
- // (or fragment) containing these types.
+ // Wszystko, co może być wyrenderowane: liczby, łańcuchy znaków, elementy lub tablice
+ // (lub fragmenty) zawierające te typy.
optionalNode: PropTypes.node,
- // A React element.
+ // Element reactowy.
optionalElement: PropTypes.element,
- // A React element type (ie. MyComponent).
+ // Typ komponenetu reactowego (np. MyComponent).
optionalElementType: PropTypes.elementType,
- // You can also declare that a prop is an instance of a class. This uses
- // JS's instanceof operator.
+ // Możesz także zadeklarować właściwość, która będzie instancją klasy.
+ // Wykorzystujemy do tego operator instanceof z JavaScriptu.
optionalMessage: PropTypes.instanceOf(Message),
- // You can ensure that your prop is limited to specific values by treating
- // it as an enum.
+ // Możesz się upewnić, czy właściwość jest ograniczona do określonych wartości
optionalEnum: PropTypes.oneOf(['News', 'Photos']),
- // An object that could be one of many types
+ // Właściwość może też mieć wiele typów
optionalUnion: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Message)
]),
- // An array of a certain type
+ // Tablica zawierająca elementy określonego typu
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
- // An object with property values of a certain type
+ // Obiekt zawierający wartości określonego typu
optionalObjectOf: PropTypes.objectOf(PropTypes.number),
- // An object taking on a particular shape
+ // Obiekt zawierający określone pola
optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
}),
- // An object with warnings on extra properties
+ // Obiekt zawierający tylko wskazane pola
optionalObjectWithStrictShape: PropTypes.exact({
name: PropTypes.string,
quantity: PropTypes.number
}),
- // You can chain any of the above with `isRequired` to make sure a warning
- // is shown if the prop isn't provided.
+ // Możesz dodać do każdego z powyższych `isRequired,
+ // aby sprawdzić, czy podana właściwość została zdefiniowana.
requiredFunc: PropTypes.func.isRequired,
- // A value of any data type
+ // Wartość dowolnego typu danych.
requiredAny: PropTypes.any.isRequired,
- // You can also specify a custom validator. It should return an Error
- // object if the validation fails. Don't `console.warn` or throw, as this
- // won't work inside `oneOfType`.
+ // Możesz też utworzyć niestandardowy walidator. Powinien on zwracać obiekt `Error`,
+ // jeśli sprawdzenie zakończy się niepowodzeniem. Nie powinien wywoływać `console.warn`
+ // ani rzucać wyjątku, ponieważ nie będzie działał wewnątrz `oneOfType`.
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
- 'Invalid prop `' + propName + '` supplied to' +
- ' `' + componentName + '`. Validation failed.'
+ 'Niepoprawna właściwość `' + propName + '` przekazana do ' +
+ ' `' + componentName + '`. Walidacja zakończona niepowodzeniem.'
);
}
},
- // You can also supply a custom validator to `arrayOf` and `objectOf`.
- // It should return an Error object if the validation fails. The validator
- // will be called for each key in the array or object. The first two
- // arguments of the validator are the array or object itself, and the
- // current item's key.
+ // Możesz także przekazać niestandardowy walidator do `arrayOf` i `objectOf`.
+ // Powinien on zwracać obiekt `Error`, jeśli sprawdzenie zakończy się niepowodzeniem.
+ // Walidator będzie wywołany dla każdego klucza w tablicy lub obiekcie.
+ // Pierwsze dwa argumenty walidatora to walidowana tablica lub obiekt oraz klucz bieżącego elementu.
customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
if (!/matchme/.test(propValue[key])) {
return new Error(
- 'Invalid prop `' + propFullName + '` supplied to' +
- ' `' + componentName + '`. Validation failed.'
+ 'Niepoprawna właściwość `' + propFullName + '` przekazana do ' +
+ ' `' + componentName + '`. Walidacja zakończona niepowodzeniem.'
);
}
})
};
```
-### Requiring Single Child {#requiring-single-child}
+### Wymaganie dokładnie jednego potomka {#requiring-single-child}
-With `PropTypes.element` you can specify that only a single child can be passed to a component as children.
+Wykorzystując `PropTypes.element` możesz sprawdzić, czy tylko do komponentu przekazano dokładnie jednego potomka.
```javascript
import PropTypes from 'prop-types';
class MyComponent extends React.Component {
render() {
- // This must be exactly one element or it will warn.
+ // Musi zawierać dokładnie jeden element. W przeciwnym wypadku zostanie wyświetlone ostrzeżenie.
const children = this.props.children;
return (
@@ -152,45 +149,44 @@ MyComponent.propTypes = {
};
```
-### Default Prop Values {#default-prop-values}
+### Domyślne wartości właściwości {#default-prop-values}
-You can define default values for your `props` by assigning to the special `defaultProps` property:
+Możesz zdefiniować domyślne wartości dla właściwości przez przypisanie specjalnej właściwości `defaultProps`:
```javascript
class Greeting extends React.Component {
render() {
return (
-
Hello, {this.props.name}
+
Witaj, {this.props.name}
);
}
}
-// Specifies the default values for props:
+// Definiuje domyślne wartości dla właściwości:
Greeting.defaultProps = {
- name: 'Stranger'
+ name: 'obcy'
};
-// Renders "Hello, Stranger":
+// Renderuje "Witaj, obcy":
ReactDOM.render(
,
document.getElementById('example')
);
```
-If you are using a Babel transform like [transform-class-properties](https://babeljs.io/docs/plugins/transform-class-properties/) , you can also declare `defaultProps` as static property within a React component class. This syntax has not yet been finalized though and will require a compilation step to work within a browser. For more information, see the [class fields proposal](https://github.com/tc39/proposal-class-fields).
+Jeśli używasz babelowego transformatora [transform-class-properties](https://babeljs.io/docs/plugins/transform-class-properties/), możesz zadeklarować `defaultProps` jako statyczną właściwość klasy komponentu reactowego. Ta składnia jeszcze nie została ukończona i do działania w przeglądarce będzie wymagać etapu kompilacji. Aby uzyskać więcej informacji, zobacz ["class fields proposal"](https://github.com/tc39/proposal-class-fields).
```javascript
class Greeting extends React.Component {
static defaultProps = {
- name: 'stranger'
+ name: 'obcy'
}
render() {
return (
-
Hello, {this.props.name}
+
Witaj, {this.props.name}
)
}
}
```
-
-The `defaultProps` will be used to ensure that `this.props.name` will have a value if it was not specified by the parent component. The `propTypes` typechecking happens after `defaultProps` are resolved, so typechecking will also apply to the `defaultProps`.
+Właściwość `defaultProps` posłuży do zapewnienia wartości dla `this.props.name`, jeśli nie zostanie ona określona przez komponent nadrzędny. Sprawdzanie typu `propTypes` następuje po rozwiązaniu `defaultProps`, więc sprawdzanie typu będzie miało zastosowanie także do `defaultProps`.