From 9ca5408aaa9d184784f001cbaf143e11a98ab4e7 Mon Sep 17 00:00:00 2001 From: Stefan Dombrowski Date: Tue, 12 Jan 2016 19:07:35 +0100 Subject: [PATCH] [docs] Small fixes to "more about refs" MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Add a null check to "A Complete Example". * Fix outdated comment. (Found by @mjomble) * Replace short dash - with longer dash –. * Remove backticks from state, because it is not code. --- docs/08.1-more-about-refs.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/docs/08.1-more-about-refs.md b/docs/08.1-more-about-refs.md index feddad65..5bca86e7 100644 --- a/docs/08.1-more-about-refs.md +++ b/docs/08.1-more-about-refs.md @@ -91,11 +91,13 @@ In order to get a reference to a React component, you can either use `this` to g var MyComponent = React.createClass({ handleClick: function() { // Explicitly focus the text input using the raw DOM API. - this.myTextInput.focus(); + if (this.myTextInput !== null) { + this.myTextInput.focus(); + } }, render: function() { - // The ref attribute adds a reference to the component to - // this.refs when the component is mounted. + // The ref attribute is a callback that saves a reference to the + // component to this.myTextInput when the component is mounted. return (
this.myTextInput = ref} /> @@ -131,7 +133,7 @@ Refs are a great way to send a message to a particular child instance in a way t ### Cautions: -- *Never* access refs inside of any component's render method - or while any component's render method is even running anywhere in the call stack. +- *Never* access refs inside of any component's render method – or while any component's render method is even running anywhere in the call stack. - If you want to preserve Google Closure Compiler advanced-mode crushing resilience, make sure to never access as a property what was specified as a string. This means you must access using `this.refs['myRefString']` if your ref was defined as `ref="myRefString"`. -- If you have not programmed several apps with React, your first inclination is usually going to be to try to use refs to "make things happen" in your app. If this is the case, take a moment and think more critically about where `state` should be owned in the component hierarchy. Often, it becomes clear that the proper place to "own" that state is at a higher level in the hierarchy. Placing the state there often eliminates any desire to use `ref`s to "make things happen" – instead, the data flow will usually accomplish your goal. +- If you have not programmed several apps with React, your first inclination is usually going to be to try to use refs to "make things happen" in your app. If this is the case, take a moment and think more critically about where state should be owned in the component hierarchy. Often, it becomes clear that the proper place to "own" that state is at a higher level in the hierarchy. Placing the state there often eliminates any desire to use `ref`s to "make things happen" – instead, the data flow will usually accomplish your goal. - Refs may not be attached to a [stateless function](/react/docs/reusable-components.html#stateless-functions), because the component does not have a backing instance. You can always wrap a stateless component in a standard composite component and attach a ref to the composite component.