Skip to content

Commit 2e8db6a

Browse files
BunlongBunlong
committed
add conditional
1 parent 5bad507 commit 2e8db6a

File tree

41 files changed

+102
-103
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+102
-103
lines changed

‎Accessing-a-child-component/index.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html><html><head><meta charSet="utf-8" class="next-head next-head"/><title class="next-head">Accessing a child component | React patterns and techniques to use in development for React Developers</title><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" class="next-head"/><link rel="shortcut icon" href="../static/favicon.ico" class="next-head"/><meta name="description" content="Accessing a child component" class="next-head"/><meta name="author" content="Bunlong" class="next-head"/><meta property="og:type" content="website" class="next-head"/><meta property="og:url" content="https://reactpatterns.github.io" class="next-head"/><meta property="og:title" content="Accessing a child component" class="next-head"/><meta property="og:image" content="https://reactpatterns.github.io/static/reactjs.png" class="next-head"/><meta property="og:description" content="Accessing a child component" class="next-head"/><meta name="twitter:card" content="summary" class="next-head"/><meta name="twitter:site" content="@reactjspatterns" class="next-head"/><meta name="twitter:title" content="Accessing a child component" class="next-head"/><meta name="twitter:description" content="Accessing a child component" class="next-head"/><meta name="twitter:image" content="https://reactpatterns.github.io/static/reactjs.png" class="next-head"/><link href="../static/styles.css" rel="stylesheet" class="next-head"/><link rel="preload" href="/{reponame}/_next/d9899a23-7ae2-425d-bf7f-a314e7abca75/page/post.js" as="script"/><link rel="preload" href="/{reponame}/_next/d9899a23-7ae2-425d-bf7f-a314e7abca75/page/_error.js" as="script"/><link rel="preload" href="/{reponame}/_next/d9899a23-7ae2-425d-bf7f-a314e7abca75/main.js" as="script"/></head><body><div id="__next"><div data-reactroot=""><div id="container"><div id="about">[ <a href="https://github.com/codefacebook/react-patterns" target="_blank">Github</a> | <a href="https://twitter.com/reactjspatterns" target="_blank">Twitter</a> ]</div><header><h2><a href="/">React Patterns &amp; 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><meta charSet="utf-8" class="next-head next-head"/><title class="next-head">Accessing a child component | React patterns and techniques to use in development for React Developers</title><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" class="next-head"/><link rel="shortcut icon" href="../static/favicon.ico" class="next-head"/><meta name="description" content="Accessing a child component" class="next-head"/><meta name="author" content="Bunlong" class="next-head"/><meta property="og:type" content="website" class="next-head"/><meta property="og:url" content="https://reactpatterns.github.io" class="next-head"/><meta property="og:title" content="Accessing a child component" class="next-head"/><meta property="og:image" content="https://reactpatterns.github.io/static/reactjs.png" class="next-head"/><meta property="og:description" content="Accessing a child component" class="next-head"/><meta name="twitter:card" content="summary" class="next-head"/><meta name="twitter:site" content="@reactjspatterns" class="next-head"/><meta name="twitter:title" content="Accessing a child component" class="next-head"/><meta name="twitter:description" content="Accessing a child component" class="next-head"/><meta name="twitter:image" content="https://reactpatterns.github.io/static/reactjs.png" class="next-head"/><link href="../static/styles.css" rel="stylesheet" class="next-head"/><link rel="preload" href="/{reponame}/_next/ab709692-2bc9-40f5-a1cd-87202150d7a1/page/post.js" as="script"/><link rel="preload" href="/{reponame}/_next/ab709692-2bc9-40f5-a1cd-87202150d7a1/page/_error.js" as="script"/><link rel="preload" href="/{reponame}/_next/ab709692-2bc9-40f5-a1cd-87202150d7a1/main.js" as="script"/></head><body><div id="__next"><div data-reactroot=""><div id="container"><div id="about">[ <a href="https://github.com/codefacebook/react-patterns" target="_blank">Github</a> | <a href="https://twitter.com/reactjspatterns" target="_blank">Twitter</a> ]</div><header><h2><a href="/">React Patterns &amp; 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 {
22
focus() {
33
this.el.focus();
44
}
@@ -29,7 +29,7 @@
2929
)
3030
}
3131
}</code></pre></div><footer>© 2018 <a href="https://github.com/codefacebook" target="_blank">codefacebook</a>, Maintained by <a href="https://github.com/Bunlong" target="_blank">Bunlong</a> | Website built with <a href="https://reactjs.org" target="_blank">React</a> &amp; <a href="https://github.com/zeit/next.js" target="_blank">Next.js</a> | ReactPatterns on [ <a href="https://github.com/codefacebook/react-patterns" target="_blank">Github</a> | <a href="https://twitter.com/reactjspatterns" target="_blank">Twitter</a> ]</footer></div></div></div><div id="__next-error"></div><script>
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":"d9899a23-7ae2-425d-bf7f-a314e7abca75","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":"ab709692-2bc9-40f5-a1cd-87202150d7a1","assetPrefix":"/{reponame}","nextExport":true,"err":null,"chunks":[]}
3333
module={}
3434
__NEXT_LOADED_PAGES__ = []
3535
__NEXT_LOADED_CHUNKS__ = []
@@ -43,4 +43,4 @@
4343
}
4444

4545
false
46-
</script><script async="" id="__NEXT_PAGE__/post" src="/{reponame}/_next/d9899a23-7ae2-425d-bf7f-a314e7abca75/page/post.js"></script><script async="" id="__NEXT_PAGE__/_error" src="/{reponame}/_next/d9899a23-7ae2-425d-bf7f-a314e7abca75/page/_error.js"></script><script src="/{reponame}/_next/d9899a23-7ae2-425d-bf7f-a314e7abca75/main.js" async=""></script></body></html>
46+
</script><script async="" id="__NEXT_PAGE__/post" src="/{reponame}/_next/ab709692-2bc9-40f5-a1cd-87202150d7a1/page/post.js"></script><script async="" id="__NEXT_PAGE__/_error" src="/{reponame}/_next/ab709692-2bc9-40f5-a1cd-87202150d7a1/page/_error.js"></script><script src="/{reponame}/_next/ab709692-2bc9-40f5-a1cd-87202150d7a1/main.js" async=""></script></body></html>

‎Async-initialization-in-componentDidMount/index.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html><html><head><meta charSet="utf-8" class="next-head next-head"/><title class="next-head">Async initialization in componentDidMount() | React patterns and techniques to use in development for React Developers</title><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" class="next-head"/><link rel="shortcut icon" href="../static/favicon.ico" class="next-head"/><meta name="description" content="Async initialization in componentDidMount()" class="next-head"/><meta name="author" content="Bunlong" class="next-head"/><meta property="og:type" content="website" class="next-head"/><meta property="og:url" content="https://reactpatterns.github.io" class="next-head"/><meta property="og:title" content="Async initialization in componentDidMount()" class="next-head"/><meta property="og:image" content="https://reactpatterns.github.io/static/reactjs.png" class="next-head"/><meta property="og:description" content="Async initialization in componentDidMount()" class="next-head"/><meta name="twitter:card" content="summary" class="next-head"/><meta name="twitter:site" content="@reactjspatterns" class="next-head"/><meta name="twitter:title" content="Async initialization in componentDidMount()" class="next-head"/><meta name="twitter:description" content="Async initialization in componentDidMount()" class="next-head"/><meta name="twitter:image" content="https://reactpatterns.github.io/static/reactjs.png" class="next-head"/><link href="../static/styles.css" rel="stylesheet" class="next-head"/><link rel="preload" href="/{reponame}/_next/d9899a23-7ae2-425d-bf7f-a314e7abca75/page/post.js" as="script"/><link rel="preload" href="/{reponame}/_next/d9899a23-7ae2-425d-bf7f-a314e7abca75/page/_error.js" as="script"/><link rel="preload" href="/{reponame}/_next/d9899a23-7ae2-425d-bf7f-a314e7abca75/main.js" as="script"/></head><body><div id="__next"><div data-reactroot=""><div id="container"><div id="about">[ <a href="https://github.com/codefacebook/react-patterns" target="_blank">Github</a> | <a href="https://twitter.com/reactjspatterns" target="_blank">Twitter</a> ]</div><header><h2><a href="/">React Patterns &amp; 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><meta charSet="utf-8" class="next-head next-head"/><title class="next-head">Async initialization in componentDidMount() | React patterns and techniques to use in development for React Developers</title><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" class="next-head"/><link rel="shortcut icon" href="../static/favicon.ico" class="next-head"/><meta name="description" content="Async initialization in componentDidMount()" class="next-head"/><meta name="author" content="Bunlong" class="next-head"/><meta property="og:type" content="website" class="next-head"/><meta property="og:url" content="https://reactpatterns.github.io" class="next-head"/><meta property="og:title" content="Async initialization in componentDidMount()" class="next-head"/><meta property="og:image" content="https://reactpatterns.github.io/static/reactjs.png" class="next-head"/><meta property="og:description" content="Async initialization in componentDidMount()" class="next-head"/><meta name="twitter:card" content="summary" class="next-head"/><meta name="twitter:site" content="@reactjspatterns" class="next-head"/><meta name="twitter:title" content="Async initialization in componentDidMount()" class="next-head"/><meta name="twitter:description" content="Async initialization in componentDidMount()" class="next-head"/><meta name="twitter:image" content="https://reactpatterns.github.io/static/reactjs.png" class="next-head"/><link href="../static/styles.css" rel="stylesheet" class="next-head"/><link rel="preload" href="/{reponame}/_next/ab709692-2bc9-40f5-a1cd-87202150d7a1/page/post.js" as="script"/><link rel="preload" href="/{reponame}/_next/ab709692-2bc9-40f5-a1cd-87202150d7a1/page/_error.js" as="script"/><link rel="preload" href="/{reponame}/_next/ab709692-2bc9-40f5-a1cd-87202150d7a1/main.js" as="script"/></head><body><div id="__next"><div data-reactroot=""><div id="container"><div id="about">[ <a href="https://github.com/codefacebook/react-patterns" target="_blank">Github</a> | <a href="https://twitter.com/reactjspatterns" target="_blank">Twitter</a> ]</div><header><h2><a href="/">React Patterns &amp; 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() {
22
axios.get(`api/sms`)
33
.then((result) =&gt; {
44
const sms = result.data
@@ -8,7 +8,7 @@
88
})
99
})
1010
}</code></pre></div><footer>© 2018 <a href="https://github.com/codefacebook" target="_blank">codefacebook</a>, Maintained by <a href="https://github.com/Bunlong" target="_blank">Bunlong</a> | Website built with <a href="https://reactjs.org" target="_blank">React</a> &amp; <a href="https://github.com/zeit/next.js" target="_blank">Next.js</a> | ReactPatterns on [ <a href="https://github.com/codefacebook/react-patterns" target="_blank">Github</a> | <a href="https://twitter.com/reactjspatterns" target="_blank">Twitter</a> ]</footer></div></div></div><div id="__next-error"></div><script>
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":"d9899a23-7ae2-425d-bf7f-a314e7abca75","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":"ab709692-2bc9-40f5-a1cd-87202150d7a1","assetPrefix":"/{reponame}","nextExport":true,"err":null,"chunks":[]}
1212
module={}
1313
__NEXT_LOADED_PAGES__ = []
1414
__NEXT_LOADED_CHUNKS__ = []
@@ -22,4 +22,4 @@
2222
}
2323

2424
false
25-
</script><script async="" id="__NEXT_PAGE__/post" src="/{reponame}/_next/d9899a23-7ae2-425d-bf7f-a314e7abca75/page/post.js"></script><script async="" id="__NEXT_PAGE__/_error" src="/{reponame}/_next/d9899a23-7ae2-425d-bf7f-a314e7abca75/page/_error.js"></script><script src="/{reponame}/_next/d9899a23-7ae2-425d-bf7f-a314e7abca75/main.js" async=""></script></body></html>
25+
</script><script async="" id="__NEXT_PAGE__/post" src="/{reponame}/_next/ab709692-2bc9-40f5-a1cd-87202150d7a1/page/post.js"></script><script async="" id="__NEXT_PAGE__/_error" src="/{reponame}/_next/ab709692-2bc9-40f5-a1cd-87202150d7a1/page/_error.js"></script><script src="/{reponame}/_next/ab709692-2bc9-40f5-a1cd-87202150d7a1/main.js" async=""></script></body></html>

0 commit comments

Comments
 (0)