{"body":"","commit":{"authoredAt":"2016-07-05T13:52:58-07:00","authorName":"Paul O’Shannessy","authorEmail":"paul@oshannessy.com","subject":"Import warnings that currently live in gists. (#7175)","shortRevision":"26ed910f28","revision":"26ed910f287b497d19326cefb579265d79f27850"},"patch":"diff --git a\/docs\/warnings\/legacy-factories.md b\/docs\/warnings\/legacy-factories.md\nnew file mode 100644\nindex 0000000000..3a240a1b30\n--- \/dev\/null\n+++ b\/docs\/warnings\/legacy-factories.md\n@@ -0,0 +1,58 @@\n+---\n+title: React Element Factories and JSX Warning\n+layout: single\n+---\n+\n+You probably came here because your code is calling your component as a plain function call. This is now deprecated:\n+\n+```javascript\n+var MyComponent = require('MyComponent');\n+\n+function render() {\n+ return MyComponent({ foo: 'bar' }); \/\/ WARNING\n+}\n+```\n+\n+## JSX\n+\n+React components can no longer be called directly like this. Instead [you can use JSX](\/react\/docs\/jsx-in-depth.html).\n+\n+```javascript\n+var React = require('react');\n+var MyComponent = require('MyComponent');\n+\n+function render() {\n+ return ;\n+}\n+```\n+\n+## Without JSX\n+\n+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:\n+\n+```javascript\n+var React = require('react');\n+var MyComponent = React.createFactory(require('MyComponent'));\n+\n+function render() {\n+ return MyComponent({ foo: 'bar' });\n+}\n+```\n+\n+This is an easy upgrade path if you have a lot of existing function calls.\n+\n+## Dynamic components without JSX\n+\n+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:\n+\n+```javascript\n+var React = require('react');\n+\n+function render(MyComponent) {\n+ return React.createElement(MyComponent, { foo: 'bar' });\n+}\n+```\n+\n+## In Depth\n+\n+[Read more about WHY we're making this change.](https:\/\/gist.github.com\/sebmarkbage\/d7bce729f38730399d28)\ndiff --git a\/docs\/warnings\/refs-must-have-owner.md b\/docs\/warnings\/refs-must-have-owner.md\nnew file mode 100644\nindex 0000000000..9d3bd00de0\n--- \/dev\/null\n+++ b\/docs\/warnings\/refs-must-have-owner.md\n@@ -0,0 +1,26 @@\n+---\n+title: Refs Must Have Owner Warning\n+layout: single\n+---\n+\n+You are probably here because you got the following error messages:\n+\n+> Warning:\n+>\n+> 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.\n+\n+This usually means one of two things:\n+\n+- You are trying to add a `ref` to an element that is being created outside of a component's render() function.\n+- You have multiple (conflicting) copies of React loaded (eg. due to a miss-configured NPM dependency)\n+\n+\n+## Invalid Refs\n+\n+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.\n+\n+## Multiple copies of React\n+\n+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.\n+\n+If you are using npm... `npm ls` or `npm ls | grep react` might help illuminate.\ndiff --git a\/docs\/warnings\/special-props.md b\/docs\/warnings\/special-props.md\nnew file mode 100644\nindex 0000000000..d0260cc373\n--- \/dev\/null\n+++ b\/docs\/warnings\/special-props.md\n@@ -0,0 +1,8 @@\n+---\n+title: Special Props Warning\n+layout: single\n+---\n+\n+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.\n+\n+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: ``). While this may seem redundant, it's important to separate app logic from reconciling hints.\ndiff --git a\/docs\/warnings\/unknown-prop.md b\/docs\/warnings\/unknown-prop.md\nnew file mode 100644\nindex 0000000000..959fa94f22\n--- \/dev\/null\n+++ b\/docs\/warnings\/unknown-prop.md\n@@ -0,0 +1,60 @@\n+---\n+title: Unknown Prop Warning\n+layout: single\n+---\n+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.\n+\n+There are a couple of likely reasons this warning could be appearing:\n+\n+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.\n+\n+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).\n+\n+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.\n+\n+---\n+\n+To fix this, composite components should \"consume\" any prop that is intended for the composite component and not intended for the child component. Example:\n+\n+**Bad:** Unexpected `layout` prop is forwarded to the `div` tag.\n+\n+```js\n+function MyDiv(props) {\n+ if (props.layout === 'horizontal') {\n+ \/\/ BAD! Because you know for sure \"layout\" is not a prop that

understands.\n+ return

\n+ } else {\n+ \/\/ BAD! Because you know for sure \"layout\" is not a prop that

understands.\n+ return

\n+ }\n+}\n+```\n+\n+**Good:** The spread operator can be used to pull variables off props, and put the remaining props into a variable.\n+\n+```js\n+function MyDiv(props) {\n+ const { layout, ...rest } = props\n+ if (layout === 'horizontal') {\n+ return

\n+ } else {\n+ return

\n+ }\n+}\n+```\n+\n+**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.\n+\n+```js\n+function MyDiv(props) {\n+\n+ const divProps = Object.assign({}, props);\n+ delete divProps.layout;\n+\n+ if (props.layout === 'horizontal') {\n+ return

\n+ } else {\n+ return

\n+ }\n+}\n+```\n","parents":["69703e04d559ff7089938bbdfd0d0ccf9b92d992"],"files":[{"status":"A","path":"docs\/warnings\/legacy-factories.md"},{"status":"A","path":"docs\/warnings\/refs-must-have-owner.md"},{"status":"A","path":"docs\/warnings\/special-props.md"},{"status":"A","path":"docs\/warnings\/unknown-prop.md"}]}

dillon1000/react

Files changed