Import warnings that currently live in gists. (#7175)
Paul O’Shannessy committed
Jul 5, 2016 at 13:52 UTC
26ed910f287b497d19326cefb579265d79f27850
4 files changed
+152
docs/warnings/legacy-factories.md
new
+58
@@ -0,0 +1,58 @@
1
+---
2
+title: React Element Factories and JSX Warning
3
+layout: single
4
+---
5
+
6
+You probably came here because your code is calling your component as a plain function call. This is now deprecated:
7
+
8
+```javascript
9
+var MyComponent = require('MyComponent');
10
+
11
+function render() {
12
+ return MyComponent({ foo: 'bar' }); // WARNING
13
+}
14
+```
15
+
16
+## JSX
17
+
18
+React components can no longer be called directly like this. Instead [you can use JSX](/react/docs/jsx-in-depth.html).
19
+
20
+```javascript
21
+var React = require('react');
22
+var MyComponent = require('MyComponent');
23
+
24
+function render() {
25
+ return <MyComponent foo="bar" />;
26
+}
27
+```
28
+
29
+## Without JSX
30
+
31
+If you don't want to, or can't use JSX, then you'll need to wrap your component in a factory before calling it:
32
+
33
+```javascript
34
+var React = require('react');
35
+var MyComponent = React.createFactory(require('MyComponent'));
36
+
37
+function render() {
38
+ return MyComponent({ foo: 'bar' });
39
+}
40
+```
41
+
42
+This is an easy upgrade path if you have a lot of existing function calls.
43
+
44
+## Dynamic components without JSX
45
+
46
+If you get a component class from a dynamic source, then it might be unnecessary to create a factory that you immediately invoke. Instead you can just create your element inline:
47
+
48
+```javascript
49
+var React = require('react');
50
+
51
+function render(MyComponent) {
52
+ return React.createElement(MyComponent, { foo: 'bar' });
53
+}
54
+```
55
+
56
+## In Depth
57
+
58
+[Read more about WHY we're making this change.](https://gist.github.com/sebmarkbage/d7bce729f38730399d28)
docs/warnings/refs-must-have-owner.md
new
+26
@@ -0,0 +1,26 @@
1
+---
2
+title: Refs Must Have Owner Warning
3
+layout: single
4
+---
5
+
6
+You are probably here because you got the following error messages:
7
+
8
+> Warning:
9
+>
10
+> 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.
11
+
12
+This usually means one of two things:
13
+
14
+- You are trying to add a `ref` to an element that is being created outside of a component's render() function.
15
+- You have multiple (conflicting) copies of React loaded (eg. due to a miss-configured NPM dependency)
16
+
17
+
18
+## Invalid Refs
19
+
20
+Only a ReactOwner can have refs. 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). Try rendering this component inside of a new top-level component which will hold the ref.
21
+
22
+## Multiple copies of React
23
+
24
+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.
25
+
26
+If you are using npm... `npm ls` or `npm ls | grep react` might help illuminate.
docs/warnings/special-props.md
new
+8
@@ -0,0 +1,8 @@
1
+---
2
+title: Special Props Warning
3
+layout: single
4
+---
5
+
6
+Most props on a JSX element are passed on to the component, however, there are two special props (`ref` and `key`) which are used by React, and are thus not forwarded to the component.
7
+
8
+For instance, attempting to access `this.props.key` from a component (eg. the render function) is not defined. If you need to access the same value within the child component, you should pass it as a different prop (ex: `<ListItemWrapper key={result.id} id={result.id} />`). While this may seem redundant, it's important to separate app logic from reconciling hints.
docs/warnings/unknown-prop.md
new
+60
@@ -0,0 +1,60 @@
1
+---
2
+title: Unknown Prop Warning
3
+layout: single
4
+---
5
+The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.
6
+
7
+There are a couple of likely reasons this warning could be appearing:
8
+
9
+1. Are you using `{...this.props}` or `cloneElement(element, this.props)`? Your component is transferring its own props directly to a child element (eg. https://facebook.github.io/react/docs/transferring-props.html). When transferring props to a child component, you should ensure that you are not accidentally forwarding props that were intended to be interpreted by the parent component.
10
+
11
+2. You are using a non-standard DOM attribute on a native DOM node, perhaps to represent custom data. If you are trying to attach custom data to a standard DOM element, consider using a custom data attribute as described [on MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes).
12
+
13
+3. 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.
14
+
15
+---
16
+
17
+To fix this, composite components should "consume" any prop that is intended for the composite component and not intended for the child component. Example:
18
+
19
+**Bad:** Unexpected `layout` prop is forwarded to the `div` tag.
20
+
21
+```js
22
+function MyDiv(props) {
23
+ if (props.layout === 'horizontal') {
24
+ // BAD! Because you know for sure "layout" is not a prop that <div> understands.
25
+ return <div {...props} style={getHorizontalStyle()} />
26
+ } else {
27
+ // BAD! Because you know for sure "layout" is not a prop that <div> understands.
28
+ return <div {...props} style={getVerticalStyle()} />
29
+ }
30
+}
31
+```
32
+
33
+**Good:** The spread operator can be used to pull variables off props, and put the remaining props into a variable.
34
+
35
+```js
36
+function MyDiv(props) {
37
+ const { layout, ...rest } = props
38
+ if (layout === 'horizontal') {
39
+ return <div {...rest} style={getHorizontalStyle()} />
40
+ } else {
41
+ return <div {...rest} style={getVerticalStyle()} />
42
+ }
43
+}
44
+```
45
+
46
+**Good:** You can also assign the props to a new object and delete the keys that you're using from the new object. Be sure not to delete the props from the original `this.props` object, since that object should be considered immutable.
47
+
48
+```js
49
+function MyDiv(props) {
50
+
51
+ const divProps = Object.assign({}, props);
52
+ delete divProps.layout;
53
+
54
+ if (props.layout === 'horizontal') {
55
+ return <div {...divProps} style={getHorizontalStyle()} />
56
+ } else {
57
+ return <div {...divProps} style={getVerticalStyle()} />
58
+ }
59
+}
60
+```