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`.