Skip to content

Commit 3460732

Browse files
BunlongBunlong
committed
fixed styles
1 parent 1310223 commit 3460732

File tree

36 files changed

+113
-179
lines changed

36 files changed

+113
-179
lines changed

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

Lines changed: 4 additions & 4 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"/><meta name="description" content="`${props.title}`" 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="`${props.title}`" class="next-head"/><meta property="og:image" content="https://reactpatterns.github.io/static/reactjs.png" class="next-head"/><meta property="og:description" content="`${props.title}`" class="next-head"/><link href="../static/styles.css" rel="stylesheet" class="next-head"/><link rel="preload" href="/{reponame}/_next/d9b7326a-a1bc-4581-bac1-4519bc579def/page/post.js" as="script"/><link rel="preload" href="/{reponame}/_next/d9b7326a-a1bc-4581-bac1-4519bc579def/page/_error.js" as="script"/><link rel="preload" href="/{reponame}/_next/d9b7326a-a1bc-4581-bac1-4519bc579def/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><h1><a href="/">React Patterns &amp; Techniques</a></h1></header><div><h3>Accessing a child component</h3><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"/><meta name="description" content="`${props.title}`" 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="`${props.title}`" class="next-head"/><meta property="og:image" content="https://reactpatterns.github.io/static/reactjs.png" class="next-head"/><meta property="og:description" content="`${props.title}`" class="next-head"/><link href="../static/styles.css" rel="stylesheet" class="next-head"/><link rel="preload" href="/{reponame}/_next/52cee6ea-5c0d-4315-b567-d38954a36415/page/post.js" as="script"/><link rel="preload" href="/{reponame}/_next/52cee6ea-5c0d-4315-b567-d38954a36415/page/_error.js" as="script"/><link rel="preload" href="/{reponame}/_next/52cee6ea-5c0d-4315-b567-d38954a36415/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><h1><a href="/">React Patterns &amp; Techniques</a></h1></header><div><h3>Accessing a child component</h3><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
}
@@ -28,8 +28,8 @@
2828
&lt;/div&gt;
2929
)
3030
}
31-
}</code></pre></div><footer>© 2018 Maintain 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></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":"d9b7326a-a1bc-4581-bac1-4519bc579def","assetPrefix":"/{reponame}","nextExport":true,"err":null,"chunks":[]}
31+
}</code></pre></div><footer>© 2018 Maintain 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":"52cee6ea-5c0d-4315-b567-d38954a36415","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/d9b7326a-a1bc-4581-bac1-4519bc579def/page/post.js"></script><script async="" id="__NEXT_PAGE__/_error" src="/{reponame}/_next/d9b7326a-a1bc-4581-bac1-4519bc579def/page/_error.js"></script><script src="/{reponame}/_next/d9b7326a-a1bc-4581-bac1-4519bc579def/main.js" async=""></script></body></html>
46+
</script><script async="" id="__NEXT_PAGE__/post" src="/{reponame}/_next/52cee6ea-5c0d-4315-b567-d38954a36415/page/post.js"></script><script async="" id="__NEXT_PAGE__/_error" src="/{reponame}/_next/52cee6ea-5c0d-4315-b567-d38954a36415/page/_error.js"></script><script src="/{reponame}/_next/52cee6ea-5c0d-4315-b567-d38954a36415/main.js" async=""></script></body></html>

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

Lines changed: 4 additions & 4 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"/><meta name="description" content="`${props.title}`" 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="`${props.title}`" class="next-head"/><meta property="og:image" content="https://reactpatterns.github.io/static/reactjs.png" class="next-head"/><meta property="og:description" content="`${props.title}`" class="next-head"/><link href="../static/styles.css" rel="stylesheet" class="next-head"/><link rel="preload" href="/{reponame}/_next/d9b7326a-a1bc-4581-bac1-4519bc579def/page/post.js" as="script"/><link rel="preload" href="/{reponame}/_next/d9b7326a-a1bc-4581-bac1-4519bc579def/page/_error.js" as="script"/><link rel="preload" href="/{reponame}/_next/d9b7326a-a1bc-4581-bac1-4519bc579def/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><h1><a href="/">React Patterns &amp; Techniques</a></h1></header><div><h3>Async initialization in componentDidMount()</h3><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"/><meta name="description" content="`${props.title}`" 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="`${props.title}`" class="next-head"/><meta property="og:image" content="https://reactpatterns.github.io/static/reactjs.png" class="next-head"/><meta property="og:description" content="`${props.title}`" class="next-head"/><link href="../static/styles.css" rel="stylesheet" class="next-head"/><link rel="preload" href="/{reponame}/_next/52cee6ea-5c0d-4315-b567-d38954a36415/page/post.js" as="script"/><link rel="preload" href="/{reponame}/_next/52cee6ea-5c0d-4315-b567-d38954a36415/page/_error.js" as="script"/><link rel="preload" href="/{reponame}/_next/52cee6ea-5c0d-4315-b567-d38954a36415/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><h1><a href="/">React Patterns &amp; Techniques</a></h1></header><div><h3>Async initialization in componentDidMount()</h3><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
@@ -7,8 +7,8 @@
77
sms: [...sms.content]
88
})
99
})
10-
}</code></pre></div><footer>© 2018 Maintain 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></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":"d9b7326a-a1bc-4581-bac1-4519bc579def","assetPrefix":"/{reponame}","nextExport":true,"err":null,"chunks":[]}
10+
}</code></pre></div><footer>© 2018 Maintain 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":"52cee6ea-5c0d-4315-b567-d38954a36415","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/d9b7326a-a1bc-4581-bac1-4519bc579def/page/post.js"></script><script async="" id="__NEXT_PAGE__/_error" src="/{reponame}/_next/d9b7326a-a1bc-4581-bac1-4519bc579def/page/_error.js"></script><script src="/{reponame}/_next/d9b7326a-a1bc-4581-bac1-4519bc579def/main.js" async=""></script></body></html>
25+
</script><script async="" id="__NEXT_PAGE__/post" src="/{reponame}/_next/52cee6ea-5c0d-4315-b567-d38954a36415/page/post.js"></script><script async="" id="__NEXT_PAGE__/_error" src="/{reponame}/_next/52cee6ea-5c0d-4315-b567-d38954a36415/page/_error.js"></script><script src="/{reponame}/_next/52cee6ea-5c0d-4315-b567-d38954a36415/main.js" async=""></script></body></html>

0 commit comments

Comments
 (0)