You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: Accessing-a-child-component/index.html
+3-3Lines changed: 3 additions & 3 deletions
Original file line number
Diff line number
Diff line change
@@ -1,4 +1,4 @@
1
-
<!DOCTYPE html><html><head><metacharSet="utf-8" class="next-head next-head"/><titleclass="next-head">Accessing a child component | React patterns and techniques to use in development for React Developers</title><metaname="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" class="next-head"/><metaname="description" content="Accessing a child component" class="next-head"/><metaname="author" content="Bunlong" class="next-head"/><metaproperty="og:type" content="website" class="next-head"/><metaproperty="og:url" content="https://reactpatterns.github.io" class="next-head"/><metaproperty="og:title" content="Accessing a child component" class="next-head"/><metaproperty="og:image" content="https://reactpatterns.github.io/static/reactjs.png" class="next-head"/><metaproperty="og:description" content="Accessing a child component" class="next-head"/><metaname="twitter:card" content="summary" class="next-head"/><metaname="twitter:site" content="@reactjspatterns" class="next-head"/><metaname="twitter:title" content="Accessing a child component" class="next-head"/><metaname="twitter:description" content="Accessing a child component" class="next-head"/><metaname="twitter:image" content="https://reactpatterns.github.io/static/reactjs.png" class="next-head"/><linkhref="../static/styles.css" rel="stylesheet" class="next-head"/><linkrel="preload" href="/{reponame}/_next/f8ae66c3-a0d6-498f-91dd-1adf1d4ab54f/page/post.js" as="script"/><linkrel="preload" href="/{reponame}/_next/f8ae66c3-a0d6-498f-91dd-1adf1d4ab54f/page/_error.js" as="script"/><linkrel="preload" href="/{reponame}/_next/f8ae66c3-a0d6-498f-91dd-1adf1d4ab54f/main.js" as="script"/></head><body><divid="__next"><divdata-reactroot=""><divid="container"><divid="about">[ <ahref="https://github.com/codefacebook/react-patterns" target="_blank">Github</a> | <ahref="https://twitter.com/reactjspatterns" target="_blank">Twitter</a> ]</div><header><h2><ahref="/">React Patterns & Techniques</a></h2></header><div><h1>Accessing a child component</h1><p>Accessing a child component from the parent. eg. Autofocus an input (controlled by parent component)</p><p>eg. You have a sign-in form, you want to put the cursor in the user name filed once page render.</p><p>Let take a look the child component.</p><pre><code>class Input extends Component {
1
+
<!DOCTYPE html><html><head><metacharSet="utf-8" class="next-head next-head"/><titleclass="next-head">Accessing a child component | React patterns and techniques to use in development for React Developers</title><metaname="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" class="next-head"/><linkrel="shortcut icon" href="../static/favicon.ico" class="next-head"/><metaname="description" content="Accessing a child component" class="next-head"/><metaname="author" content="Bunlong" class="next-head"/><metaproperty="og:type" content="website" class="next-head"/><metaproperty="og:url" content="https://reactpatterns.github.io" class="next-head"/><metaproperty="og:title" content="Accessing a child component" class="next-head"/><metaproperty="og:image" content="https://reactpatterns.github.io/static/reactjs.png" class="next-head"/><metaproperty="og:description" content="Accessing a child component" class="next-head"/><metaname="twitter:card" content="summary" class="next-head"/><metaname="twitter:site" content="@reactjspatterns" class="next-head"/><metaname="twitter:title" content="Accessing a child component" class="next-head"/><metaname="twitter:description" content="Accessing a child component" class="next-head"/><metaname="twitter:image" content="https://reactpatterns.github.io/static/reactjs.png" class="next-head"/><linkhref="../static/styles.css" rel="stylesheet" class="next-head"/><linkrel="preload" href="/{reponame}/_next/e9992f4c-2357-411e-a6bb-4da3dba16b65/page/post.js" as="script"/><linkrel="preload" href="/{reponame}/_next/e9992f4c-2357-411e-a6bb-4da3dba16b65/page/_error.js" as="script"/><linkrel="preload" href="/{reponame}/_next/e9992f4c-2357-411e-a6bb-4da3dba16b65/main.js" as="script"/></head><body><divid="__next"><divdata-reactroot=""><divid="container"><divid="about">[ <ahref="https://github.com/codefacebook/react-patterns" target="_blank">Github</a> | <ahref="https://twitter.com/reactjspatterns" target="_blank">Twitter</a> ]</div><header><h2><ahref="/">React Patterns & Techniques</a></h2></header><div><h1>Accessing a child component</h1><p>Accessing a child component from the parent. eg. Autofocus an input (controlled by parent component)</p><p>eg. You have a sign-in form, you want to put the cursor in the user name filed once page render.</p><p>Let take a look the child component.</p><pre><code>class Input extends Component {
__NEXT_DATA__={"props":{"content":"# Accessing a child component\n\nAccessing a child component from the parent. eg. Autofocus an input (controlled by parent component)\n\neg. You have a sign-in form, you want to put the cursor in the user name filed once page render.\n\nLet take a look the child component.\n\n```\nclass Input extends Component {\n focus() {\n this.el.focus();\n }\n \n render() {\n return (\n \u003cinput\n ref={el=\u003e { this.el = el; }}\n /\u003e\n );\n }\n}\n```\n\nAn Input component with a `focus()` method that focuses the HTML element.\n\nIn the parent component, we can get a reference to the Input component and call its `focus()` method.\n\n```\nclass SignInModal extends Component {\n componentDidMount() {\n // Note that when you use ref on a component, it’s a reference to \n // the component (not the underlying element), so you have access to its methods.\n \n this.InputComponent.focus();\n }\n \n render() {\n return (\n \u003cdiv\u003e\n \u003clabel\u003eUser name: \u003c/label\u003e\n \u003cInput\n ref={comp =\u003e { this.InputComponent = comp; }}\n /\u003e\n \u003c/div\u003e\n )\n }\n}\n```","title":"Accessing a child component"},"page":"/post","pathname":"/post","query":{"id":"Accessing-a-child-component"},"buildId":"f8ae66c3-a0d6-498f-91dd-1adf1d4ab54f","assetPrefix":"/{reponame}","nextExport":true,"err":null,"chunks":[]}
32
+
__NEXT_DATA__={"props":{"content":"# Accessing a child component\n\nAccessing a child component from the parent. eg. Autofocus an input (controlled by parent component)\n\neg. You have a sign-in form, you want to put the cursor in the user name filed once page render.\n\nLet take a look the child component.\n\n```\nclass Input extends Component {\n focus() {\n this.el.focus();\n }\n \n render() {\n return (\n \u003cinput\n ref={el=\u003e { this.el = el; }}\n /\u003e\n );\n }\n}\n```\n\nAn Input component with a `focus()` method that focuses the HTML element.\n\nIn the parent component, we can get a reference to the Input component and call its `focus()` method.\n\n```\nclass SignInModal extends Component {\n componentDidMount() {\n // Note that when you use ref on a component, it’s a reference to \n // the component (not the underlying element), so you have access to its methods.\n \n this.InputComponent.focus();\n }\n \n render() {\n return (\n \u003cdiv\u003e\n \u003clabel\u003eUser name: \u003c/label\u003e\n \u003cInput\n ref={comp =\u003e { this.InputComponent = comp; }}\n /\u003e\n \u003c/div\u003e\n )\n }\n}\n```","title":"Accessing a child component"},"page":"/post","pathname":"/post","query":{"id":"Accessing-a-child-component"},"buildId":"e9992f4c-2357-411e-a6bb-4da3dba16b65","assetPrefix":"/{reponame}","nextExport":true,"err":null,"chunks":[]}
Copy file name to clipboardExpand all lines: Async-initialization-in-componentDidMount/index.html
+3-3Lines changed: 3 additions & 3 deletions
Original file line number
Diff line number
Diff line change
@@ -1,4 +1,4 @@
1
-
<!DOCTYPE html><html><head><metacharSet="utf-8" class="next-head next-head"/><titleclass="next-head">Async initialization in componentDidMount() | React patterns and techniques to use in development for React Developers</title><metaname="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" class="next-head"/><metaname="description" content="Async initialization in componentDidMount()" class="next-head"/><metaname="author" content="Bunlong" class="next-head"/><metaproperty="og:type" content="website" class="next-head"/><metaproperty="og:url" content="https://reactpatterns.github.io" class="next-head"/><metaproperty="og:title" content="Async initialization in componentDidMount()" class="next-head"/><metaproperty="og:image" content="https://reactpatterns.github.io/static/reactjs.png" class="next-head"/><metaproperty="og:description" content="Async initialization in componentDidMount()" class="next-head"/><metaname="twitter:card" content="summary" class="next-head"/><metaname="twitter:site" content="@reactjspatterns" class="next-head"/><metaname="twitter:title" content="Async initialization in componentDidMount()" class="next-head"/><metaname="twitter:description" content="Async initialization in componentDidMount()" class="next-head"/><metaname="twitter:image" content="https://reactpatterns.github.io/static/reactjs.png" class="next-head"/><linkhref="../static/styles.css" rel="stylesheet" class="next-head"/><linkrel="preload" href="/{reponame}/_next/f8ae66c3-a0d6-498f-91dd-1adf1d4ab54f/page/post.js" as="script"/><linkrel="preload" href="/{reponame}/_next/f8ae66c3-a0d6-498f-91dd-1adf1d4ab54f/page/_error.js" as="script"/><linkrel="preload" href="/{reponame}/_next/f8ae66c3-a0d6-498f-91dd-1adf1d4ab54f/main.js" as="script"/></head><body><divid="__next"><divdata-reactroot=""><divid="container"><divid="about">[ <ahref="https://github.com/codefacebook/react-patterns" target="_blank">Github</a> | <ahref="https://twitter.com/reactjspatterns" target="_blank">Twitter</a> ]</div><header><h2><ahref="/">React Patterns & Techniques</a></h2></header><div><h1>Async initialization in componentDidMount()</h1><p>You should avoid async initialization in <code>componentWillMount()</code>, <code>componentWillMount()</code> is called before <code>render()</code> that why setting state in this method will not trigger <code>render()</code> method.</p><p>You should make async calls for component initialization in <code>componentDidMount()</code> instead of <code>componentWillMount()</code>.</p><pre><code>function componentDidMount() {
1
+
<!DOCTYPE html><html><head><metacharSet="utf-8" class="next-head next-head"/><titleclass="next-head">Async initialization in componentDidMount() | React patterns and techniques to use in development for React Developers</title><metaname="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" class="next-head"/><linkrel="shortcut icon" href="../static/favicon.ico" class="next-head"/><metaname="description" content="Async initialization in componentDidMount()" class="next-head"/><metaname="author" content="Bunlong" class="next-head"/><metaproperty="og:type" content="website" class="next-head"/><metaproperty="og:url" content="https://reactpatterns.github.io" class="next-head"/><metaproperty="og:title" content="Async initialization in componentDidMount()" class="next-head"/><metaproperty="og:image" content="https://reactpatterns.github.io/static/reactjs.png" class="next-head"/><metaproperty="og:description" content="Async initialization in componentDidMount()" class="next-head"/><metaname="twitter:card" content="summary" class="next-head"/><metaname="twitter:site" content="@reactjspatterns" class="next-head"/><metaname="twitter:title" content="Async initialization in componentDidMount()" class="next-head"/><metaname="twitter:description" content="Async initialization in componentDidMount()" class="next-head"/><metaname="twitter:image" content="https://reactpatterns.github.io/static/reactjs.png" class="next-head"/><linkhref="../static/styles.css" rel="stylesheet" class="next-head"/><linkrel="preload" href="/{reponame}/_next/e9992f4c-2357-411e-a6bb-4da3dba16b65/page/post.js" as="script"/><linkrel="preload" href="/{reponame}/_next/e9992f4c-2357-411e-a6bb-4da3dba16b65/page/_error.js" as="script"/><linkrel="preload" href="/{reponame}/_next/e9992f4c-2357-411e-a6bb-4da3dba16b65/main.js" as="script"/></head><body><divid="__next"><divdata-reactroot=""><divid="container"><divid="about">[ <ahref="https://github.com/codefacebook/react-patterns" target="_blank">Github</a> | <ahref="https://twitter.com/reactjspatterns" target="_blank">Twitter</a> ]</div><header><h2><ahref="/">React Patterns & Techniques</a></h2></header><div><h1>Async initialization in componentDidMount()</h1><p>You should avoid async initialization in <code>componentWillMount()</code>, <code>componentWillMount()</code> is called before <code>render()</code> that why setting state in this method will not trigger <code>render()</code> method.</p><p>You should make async calls for component initialization in <code>componentDidMount()</code> instead of <code>componentWillMount()</code>.</p><pre><code>function componentDidMount() {
__NEXT_DATA__={"props":{"content":"# Async initialization in componentDidMount()\n\nYou should avoid async initialization in `componentWillMount()`, `componentWillMount()` is called before `render()` that why setting state in this method will not trigger `render()` method.\n\nYou should make async calls for component initialization in `componentDidMount()` instead of `componentWillMount()`.\n\n```\nfunction componentDidMount() {\n axios.get(`api/sms`)\n .then((result) =\u003e {\n const sms = result.data\n console.log(\"COMPONENT WILL Mount messages : \", sms);\n this.setState({\n sms: [...sms.content]\n })\n })\n}\n```","title":"Async initialization in componentDidMount()"},"page":"/post","pathname":"/post","query":{"id":"Async-initialization-in-componentDidMount"},"buildId":"f8ae66c3-a0d6-498f-91dd-1adf1d4ab54f","assetPrefix":"/{reponame}","nextExport":true,"err":null,"chunks":[]}
11
+
__NEXT_DATA__={"props":{"content":"# Async initialization in componentDidMount()\n\nYou should avoid async initialization in `componentWillMount()`, `componentWillMount()` is called before `render()` that why setting state in this method will not trigger `render()` method.\n\nYou should make async calls for component initialization in `componentDidMount()` instead of `componentWillMount()`.\n\n```\nfunction componentDidMount() {\n axios.get(`api/sms`)\n .then((result) =\u003e {\n const sms = result.data\n console.log(\"COMPONENT WILL Mount messages : \", sms);\n this.setState({\n sms: [...sms.content]\n })\n })\n}\n```","title":"Async initialization in componentDidMount()"},"page":"/post","pathname":"/post","query":{"id":"Async-initialization-in-componentDidMount"},"buildId":"e9992f4c-2357-411e-a6bb-4da3dba16b65","assetPrefix":"/{reponame}","nextExport":true,"err":null,"chunks":[]}
0 commit comments