Skip to content

Commit b713a7b

Browse files
Merge pull request #81 from jvelezpo/more-warnings
More warnings
2 parents 71d889c + 3b5fa8f commit b713a7b

File tree

3 files changed

+47
-45
lines changed

3 files changed

+47
-45
lines changed

content/warnings/dont-call-proptypes.md

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,64 +4,64 @@ layout: single
44
permalink: warnings/dont-call-proptypes.html
55
---
66

7-
> Note:
7+
> Nota:
88
>
9-
> `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).
9+
> `React.PropTypes` se ha mudado a un paquete diferente desde React v15.5. Utiliza [la biblioteca `prop-types` en su lugar](https://www.npmjs.com/package/prop-types).
1010
>
11-
>We provide [a codemod script](/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes) to automate the conversion.
11+
> Proporcionamos [un script codemod](/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes) para automatizar la conversión.
1212
13-
In a future major release of React, the code that implements PropType validation functions will be stripped in production. Once this happens, any code that calls these functions manually (that isn't stripped in production) will throw an error.
13+
En una importante versión futura de React, el código que implementa las funciones de validación PropType se eliminará en producción. Una vez que esto suceda, cualquier código que llame a estas funciones manualmente (que no se haya eliminado en producción) generará un error.
1414

15-
### Declaring PropTypes is still fine
15+
### Declarar PropTypes todavía está bien
1616

17-
The normal usage of PropTypes is still supported:
17+
El uso normal de PropTypes todavía es compatible:
1818

1919
```javascript
2020
Button.propTypes = {
2121
highlighted: PropTypes.bool
2222
};
2323
```
2424

25-
Nothing changes here.
25+
Nada cambia aquí.
2626

27-
### Don’t call PropTypes directly
27+
### No llames PropTypes directamente
2828

29-
Using PropTypes in any other way than annotating React components with them is no longer supported:
29+
Ya no se admite el uso de PropTypes de otra manera que no sea la anotación de componentes React con ellos:
3030

3131
```javascript
3232
var apiShape = PropTypes.shape({
3333
body: PropTypes.object,
3434
statusCode: PropTypes.number.isRequired
3535
}).isRequired;
3636

37-
// Not supported!
37+
// ¡No soportado!
3838
var error = apiShape(json, 'response');
3939
```
4040

41-
If you depend on using PropTypes like this, we encourage you to use or create a fork of PropTypes (such as [these](https://github.com/aackerman/PropTypes) [two](https://github.com/developit/proptypes) packages).
41+
Si dependes en el uso de PropTypes como este, te recomendamos que uses o crees una bifurcación de PropTypes (como [estos](https://github.com/aackerman/PropTypes) [dos](https://github.com/developit/proptypes) paquetes).
4242

43-
If you don't fix the warning, this code will crash in production with React 16.
43+
Si no corriges la advertencia, este código se bloqueará en la versión de producción que use React 16.
4444

45-
### If you don't call PropTypes directly but still get the warning
45+
### Si no llamas directamente a PropTypes pero sigues recibiendo la advertencia
4646

47-
Inspect the stack trace produced by the warning. You will find the component definition responsible for the PropTypes direct call. Most likely, the issue is due to third-party PropTypes that wrap React’s PropTypes, for example:
47+
Inspecciona la traza producida por la advertencia. Encontrarás la definición del componente responsable de la llamada directa PropTypes. Probablemente, el problema se deba a PropTypes de terceros que envuelven PropTypes de React, por ejemplo:
4848

4949
```js
5050
Button.propTypes = {
5151
highlighted: ThirdPartyPropTypes.deprecated(
5252
PropTypes.bool,
53-
'Use `active` prop instead'
53+
'Usa prop `active` en su lugar'
5454
)
5555
}
5656
```
5757

58-
In this case, `ThirdPartyPropTypes.deprecated` is a wrapper calling `PropTypes.bool`. This pattern by itself is fine, but triggers a false positive because React thinks you are calling PropTypes directly. The next section explains how to fix this problem for a library implementing something like `ThirdPartyPropTypes`. If it's not a library you wrote, you can file an issue against it.
58+
En este caso, `ThirdPartyPropTypes.deprecated` es un contenedor que llama a `PropTypes.bool`. Este patrón en sí mismo está bien, pero desencadena un falso positivo porque React cree que tú estás llamando directamente a PropTypes. La siguiente sección explica cómo solucionar este problema para una biblioteca que implementa algo como `ThirdPartyPropTypes`. Si no es una biblioteca que escribiste, puedes abrir un issue en su proyecto.
5959

60-
### Fixing the false positive in third party PropTypes
60+
### Solucionando el falso positivo en PropTypes de terceros
6161

62-
If you are an author of a third party PropTypes library and you let consumers wrap existing React PropTypes, they might start seeing this warning coming from your library. This happens because React doesn't see a "secret" last argument that [it passes](https://github.com/facebook/react/pull/7132) to detect manual PropTypes calls.
62+
Si tú eres autor de una biblioteca PropTypes y dejas que los consumidores envuelvan los PropTypes React existentes, es posible que comiencen a ver esta advertencia proveniente de su biblioteca. Esto sucede porque React no ve un último argumento "secreto" que [se pasa](https://github.com/facebook/react/pull/7132) para detectar llamadas de PropTypes manuales.
6363

64-
Here is how to fix it. We will use `deprecated` from [react-bootstrap/react-prop-types](https://github.com/react-bootstrap/react-prop-types/blob/0d1cd3a49a93e513325e3258b28a82ce7d38e690/src/deprecated.js) as an example. The current implementation only passes down the `props`, `propName`, and `componentName` arguments:
64+
Aquí esta cómo solucionarlo. Usaremos `deprecated` de [react-bootstrap/react-prop-types](https://github.com/react-bootstrap/react-prop-types/blob/0d1cd3a49a93e513325e3258b28a82ce7d38e690/src/deprecated.js) como un ejemplo. La implementación actual sólo pasa los argumentos `props`,`propName` y `componentName`:
6565

6666
```javascript
6767
export default function deprecated(propType, explanation) {
@@ -80,10 +80,11 @@ export default function deprecated(propType, explanation) {
8080
```
8181

8282
In order to fix the false positive, make sure you pass **all** arguments down to the wrapped PropType. This is easy to do with the ES6 `...rest` notation:
83+
Para corregir el falso positivo, asegurate de pasar **todos** los argumentos al PropType envuelto. Esto es fácil de hacer con la notación ES6 `...rest`:
8384

8485
```javascript
8586
export default function deprecated(propType, explanation) {
86-
return function validate(props, propName, componentName, ...rest) { // Note ...rest here
87+
return function validate(props, propName, componentName, ...rest) { // Nota ...rest aqui
8788
if (props[propName] != null) {
8889
const message = `"${propName}" property of "${componentName}" has been deprecated.\n${explanation}`;
8990
if (!warned[message]) {
@@ -92,9 +93,9 @@ export default function deprecated(propType, explanation) {
9293
}
9394
}
9495

95-
return propType(props, propName, componentName, ...rest); // and here
96+
return propType(props, propName, componentName, ...rest); // y aqui
9697
};
9798
}
9899
```
99100

100-
This will silence the warning.
101+
Esto silenciará la advertencia.

content/warnings/invalid-aria-prop.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ layout: single
44
permalink: warnings/invalid-aria-prop.html
55
---
66

7-
The invalid-aria-prop warning will fire if you attempt to render a DOM element with an aria-* prop that does not exist in the Web Accessibility Initiative (WAI) Accessible Rich Internet Application (ARIA) [specification](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties).
7+
La advertencia invalid-aria-prop se activará si intentas renderizar un elemento DOM con un aria-* prop que no existe en la Iniciativa de accesibilidad web (WAI) Aplicación de Internet enriquecida accesible (ARIA) [especificación](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties).
88

9-
1. If you feel that you are using a valid prop, check the spelling carefully. `aria-labelledby` and `aria-activedescendant` are often misspelled.
9+
1. Si sientes que estás utilizando un prop válido, revisa la ortografía cuidadosamente. `aria-labelledby` y` aria-activedescendant` a menudo están mal escritas.
1010

11-
2. React does not yet recognize the attribute you specified. This will likely be fixed in a future version of React. However, React currently strips all unknown attributes, so specifying them in your React app will not cause them to be rendered
11+
2. React aún no reconoce el atributo que has especificado. Esto probablemente se solucionará en una versión futura de React. Sin embargo, React actualmente elimina todos los atributos desconocidos, por lo que especificarlos en su aplicación React no hará que se renderizen

content/warnings/refs-must-have-owner.md

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,45 +4,46 @@ layout: single
44
permalink: warnings/refs-must-have-owner.html
55
---
66

7-
You are probably here because you got one of the following error messages:
7+
Probablemente estés aquí porque recibió uno de los siguientes mensajes de error:
88

99
*React 16.0.0+*
10-
> Warning:
10+
> Advertencia:
1111
>
1212
> Element ref was specified as a string (myRefName) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner).
1313
14-
*earlier versions of React*
15-
> Warning:
14+
*versiones anteriores de React*
15+
> Advertencia:
1616
>
17-
> addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded.
17+
> addComponentAsRefTo(...): solo un ReactOwner puede tener refs. Es posible que esté agregando un ref a un componente que no se creó dentro del método `render` de un componente, o si tiene varias copias cargadas de React.
1818
19-
This usually means one of three things:
19+
Esto usualmente significa una de tres cosas:
2020

21-
- You are trying to add a `ref` to a function component.
22-
- You are trying to add a `ref` to an element that is being created outside of a component's render() function.
23-
- You have multiple (conflicting) copies of React loaded (eg. due to a misconfigured npm dependency)
21+
- Estás intentando agregar un `ref` a un componente de función.
22+
- Está intentando agregar un `ref` a un elemento que se está creando fuera de la función render() de un componente.
23+
- Tiene varias copias (en conflicto) de React cargadas (por ejemplo, debido a una dependencia npm mal configurada)
2424

25-
## Refs on Function Components
25+
## Refs en los componentes de función
2626

27-
If `<Foo>` is a function component, you can't add a ref to it:
27+
Si `<Foo>` es un componente de función, no puedes agregarle una referencia:
2828

2929
```js
30-
// Doesn't work if Foo is a function!
30+
// ¡No funciona si Foo es una función!
3131
<Foo ref={foo} />
3232
```
3333

3434
If you need to add a ref to a component, convert it to a class first, or consider not using refs as they are [rarely necessary](/docs/refs-and-the-dom.html#when-to-use-refs).
35+
Si necesitas agregar una referencia a un componente, primero conviértelo a una clase, o considera no usar las referencias ya que son [raramente necesarias](/docs/refs-and-the-dom.html#when-to-use-refs).
3536

36-
## Strings Refs Outside the Render Method
37+
## Cadenas de Ref fuera del método Render
3738

38-
This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `render` method). For example, this won't work:
39+
Esto generalmente significa que estás intentando agregar una referencia a un componente que no tiene un propietario (es decir, no se creó dentro del método `render` de otro componente). Por ejemplo, esto no funcionará:
3940

4041
```js
41-
// Doesn't work!
42+
// ¡No funciona!
4243
ReactDOM.render(<App ref="app" />, el);
4344
```
4445

45-
Try rendering this component inside of a new top-level component which will hold the ref. Alternatively, you may use a callback ref:
46+
Intenta renderizar este componente dentro de un nuevo componente de nivel superior que contendrá la referencia. Como alternativa, puedes utilizar una referencia de callback:
4647

4748
```js
4849
let app;
@@ -54,10 +55,10 @@ ReactDOM.render(
5455
);
5556
```
5657

57-
Consider if you [really need a ref](/docs/refs-and-the-dom.html#when-to-use-refs) before using this approach.
58+
Considera si [realmente necesitas una referencia](/docs/refs-and-the-dom.html#when-to-use-refs) antes de usar este enfoque.
5859

59-
## Multiple copies of React
60+
## Múltiples copias de React
6061

61-
Bower does a good job of deduplicating dependencies, but npm does not. If you aren't doing anything (fancy) with refs, there is a good chance that the problem is not with your refs, but rather an issue with having multiple copies of React loaded into your project. Sometimes, when you pull in a third-party module via npm, you will get a duplicate copy of the dependency library, and this can create problems.
62+
Bower hace un buen trabajo de deduplicación de dependencias, pero npm no lo hace. Si no está haciendo nada (elegante) con refs, hay una buena probabilidad de que el problema no sea con sus refs, sino más bien un problema con tener varias copias de React cargadas en tu proyecto. A veces, cuando ingresa un módulo de terceros a través de npm, obtendrás una copia duplicada de la biblioteca de dependencias, y esto puede crear problemas.
6263

63-
If you are using npm... `npm ls` or `npm ls react` might help illuminate.
64+
Si estás utilizando npm... `npm ls` o `npm ls react` pueden ayudarte a iluminarte.

0 commit comments

Comments
 (0)