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
<!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="`${props.title}`" 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="`${props.title}`" class="next-head"/><metaproperty="og:image" content="https://reactpatterns.github.io/static/reactjs.png" class="next-head"/><metaproperty="og:description" content="`${props.title}`" class="next-head"/><linkhref="../static/styles.css" rel="stylesheet" class="next-head"/><linkrel="preload" href="/{reponame}/_next/d9b7326a-a1bc-4581-bac1-4519bc579def/page/post.js" as="script"/><linkrel="preload" href="/{reponame}/_next/d9b7326a-a1bc-4581-bac1-4519bc579def/page/_error.js" as="script"/><linkrel="preload" href="/{reponame}/_next/d9b7326a-a1bc-4581-bac1-4519bc579def/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><h1><ahref="/">React Patterns & 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 {
2
+
focus() {
3
+
this.el.focus();
4
+
}
5
+
6
+
render() {
7
+
return (
8
+
<input
9
+
ref={el=> { this.el = el; }}
10
+
/>
11
+
);
12
+
}
13
+
}</code></pre><p>An Input component with a <code>focus()</code> method that focuses the HTML element.</p><p>In the parent component, we can get a reference to the Input component and call its <code>focus()</code> method.</p><pre><code>class SignInModal extends Component {
14
+
componentDidMount() {
15
+
// Note that when you use ref on a component, it’s a reference to
16
+
// the component (not the underlying element), so you have access to its methods.
__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":[]}
<!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="`${props.title}`" 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="`${props.title}`" class="next-head"/><metaproperty="og:image" content="https://reactpatterns.github.io/static/reactjs.png" class="next-head"/><metaproperty="og:description" content="`${props.title}`" class="next-head"/><linkhref="../static/styles.css" rel="stylesheet" class="next-head"/><linkrel="preload" href="/{reponame}/_next/d9b7326a-a1bc-4581-bac1-4519bc579def/page/post.js" as="script"/><linkrel="preload" href="/{reponame}/_next/d9b7326a-a1bc-4581-bac1-4519bc579def/page/_error.js" as="script"/><linkrel="preload" href="/{reponame}/_next/d9b7326a-a1bc-4581-bac1-4519bc579def/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><h1><ahref="/">React Patterns & 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() {
2
+
axios.get(`api/sms`)
3
+
.then((result) => {
4
+
const sms = result.data
5
+
console.log("COMPONENT WILL Mount messages : ", sms);
__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":[]}
<!DOCTYPE html><html><head><metacharSet="utf-8" class="next-head next-head"/><titleclass="next-head">Component injection | 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="`${props.title}`" 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="`${props.title}`" class="next-head"/><metaproperty="og:image" content="https://reactpatterns.github.io/static/reactjs.png" class="next-head"/><metaproperty="og:description" content="`${props.title}`" class="next-head"/><linkhref="../static/styles.css" rel="stylesheet" class="next-head"/><linkrel="preload" href="/{reponame}/_next/d9b7326a-a1bc-4581-bac1-4519bc579def/page/post.js" as="script"/><linkrel="preload" href="/{reponame}/_next/d9b7326a-a1bc-4581-bac1-4519bc579def/page/_error.js" as="script"/><linkrel="preload" href="/{reponame}/_next/d9b7326a-a1bc-4581-bac1-4519bc579def/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><h1><ahref="/">React Patterns & Techniques</a></h1></header><div><h3>Component injection</h3><p>Naming your props is important but instead of calling a function to render, I’d like to propose that, in many cases, you should pass a component.</p><p>This allows you to use the more expressive JSX syntax. It’s called "Component Injection" because you pass (or inject) a component into another component.</p><pre><code>const Hello = ({ name }) => {
2
+
return <div>`hello from ${name}`</div>;
3
+
};</code></pre><pre><code><Foo Hello={Hello} /></code></pre><p>Things look pretty much the same as in the <atitle="Function as prop component" href="pages/Function-as-prop-component.md">Function as prop component</a>, except we capitalize <code>Hello</code> because convention calls for us to capitalize the first letter of a component name. We also pass in <code>props</code>, an object, instead of a single string parameter, but those are the only differences.</p><p>And <code>Foo</code> component will looks a lot more like a traditional React component.</p><pre><code>const Foo = ({ Hello }) => {
4
+
return <Hello name="foo" />;
5
+
};</code></pre><p>Now let take a look at a advanced example, altered for Component Injection.</p><pre><code>render() {
6
+
const { width } = this.state;
7
+
const { Width } = this.props;
8
+
return <Width width={width} />;
9
+
}</code></pre><p>as well as how you use it.</p><pre><code><PageWidth Width={DisplayPageWidthText} /></code></pre><pre><code>const DisplayWindowWidthText = ({ width }) => {
10
+
return <div>window is {width}</div>;
11
+
};</code></pre><p>As you can see, the <code>DisplayPageWidthText</code> component is "injected" into <code>PageWidth</code> as a prop named <code>Width</code>.</p><p>You could even pass a different component and get a completely different rendered output, thanks to the power of <atitle="Render callback" href="pages/Render-callback.md">Render callback</a>.</p><pre><code><PageWidth Width={DisplayDevice} /></code></pre><pre><code>const DisplayDevice = ({ width }) => {
12
+
let device = null;
13
+
if (width <= 480) {
14
+
device = 'mobile';
15
+
} else if (width <= 768) {
16
+
device = 'tablet';
17
+
} else {
18
+
device = 'desktop';
19
+
}
20
+
return <div>you are using a {device}</div>;
__NEXT_DATA__={"props":{"content":"### Component injection\n\nNaming your props is important but instead of calling a function to render, I’d like to propose that, in many cases, you should pass a component.\n\nThis allows you to use the more expressive JSX syntax. It’s called \"Component Injection\" because you pass (or inject) a component into another component.\n\n```\nconst Hello = ({ name }) =\u003e {\n return \u003cdiv\u003e`hello from ${name}`\u003c/div\u003e;\n};\n```\n\n```\n\u003cFoo Hello={Hello} /\u003e\n```\n\nThings look pretty much the same as in the [Function as prop component](pages/Function-as-prop-component.md \"Function as prop component\"), except we capitalize `Hello` because convention calls for us to capitalize the first letter of a component name. We also pass in `props`, an object, instead of a single string parameter, but those are the only differences.\n\nAnd `Foo` component will looks a lot more like a traditional React component.\n\n```\nconst Foo = ({ Hello }) =\u003e {\n return \u003cHello name=\"foo\" /\u003e;\n};\n```\n\nNow let take a look at a advanced example, altered for Component Injection.\n\n```\nrender() {\n const { width } = this.state;\n const { Width } = this.props;\n return \u003cWidth width={width} /\u003e;\n}\n```\n\nas well as how you use it.\n\n```\n\u003cPageWidth Width={DisplayPageWidthText} /\u003e\n```\n\n```\nconst DisplayWindowWidthText = ({ width }) =\u003e {\n return \u003cdiv\u003ewindow is {width}\u003c/div\u003e;\n};\n```\n\nAs you can see, the `DisplayPageWidthText` component is \"injected\" into `PageWidth` as a prop named `Width`.\n\nYou could even pass a different component and get a completely different rendered output, thanks to the power of [Render callback](pages/Render-callback.md \"Render callback\").\n\n```\n\u003cPageWidth Width={DisplayDevice} /\u003e\n```\n\n```\nconst DisplayDevice = ({ width }) =\u003e {\n let device = null;\n if (width \u003c= 480) {\n device = 'mobile';\n } else if (width \u003c= 768) {\n device = 'tablet';\n } else {\n device = 'desktop';\n }\n return \u003cdiv\u003eyou are using a {device}\u003c/div\u003e;\n};\n```","title":"Component injection"},"page":"/post","pathname":"/post","query":{"id":"Component-injection"},"buildId":"d9b7326a-a1bc-4581-bac1-4519bc579def","assetPrefix":"/{reponame}","nextExport":true,"err":null,"chunks":[]}
0 commit comments