diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md index c5ef190e1..aa1d584d3 100644 --- a/content/docs/components-and-props.md +++ b/content/docs/components-and-props.md @@ -232,11 +232,7 @@ function Comment(props) { [ทดลองเขียนบน CodePen](codepen://components-and-props/extracting-components-continued) -<<<<<<< HEAD การแบ่งส่วนคอมโพเนนท์อาจจะดูเป็นงานที่ดูจุกจิกในตอนแรก แต่การมีชุดของคอมโพเนนท์ที่สามารถนำไปใช้ซ้ำได้เยอะๆส่งผลดีต่อการพัฒนาในแอพที่ใหญ่ขึ้น หลักการง่ายๆคือถ้ามีส่วนของการแสดงผลที่นำไปใช้หลายๆครั้ง (เช่น `Button`, `Panel`, `Avatar`) หรือคอมโพเนนท์ที่ซับซ้อน (อย่างเช่น `App`, `FeedStory`, `Comment`) การสร้างมันให้เป็นคอมโพเนนท์ก็เป็นตัวเลือกดี -======= -Extracting components might seem like grunt work at first, but having a palette of reusable components pays off in larger apps. A good rule of thumb is that if a part of your UI is used several times (`Button`, `Panel`, `Avatar`), or is complex enough on its own (`App`, `FeedStory`, `Comment`), it is a good candidate to be extracted to a separate component. ->>>>>>> bd0c9d8c5f5e78e0bd1066b46024ba98f4daac84 ## พรอพส์นั้นต้องไม่เปลี่ยนแปลง {#props-are-read-only} diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index b6cb74bd0..c71bc4af1 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -122,11 +122,7 @@ ReactDOM.render( ### Inline If กับ Logical && Operator {#inline-if-with-logical--operator} -<<<<<<< HEAD คุณอาจจะใช้ [embed expressions อะไรก็ได้ใน JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) โดยการครอบพวกมันไว้ในวงเล็บปีกกา(curly braces) โดยใช้ JavaScript logical `&&` operator ในการสร้างเงื่อนใขในการนำ element เข้ามาประกอบกันหรือไม่: -======= -You may [embed expressions in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) by wrapping them in curly braces. This includes the JavaScript logical `&&` operator. It can be handy for conditionally including an element: ->>>>>>> bd0c9d8c5f5e78e0bd1066b46024ba98f4daac84 ```js{6-10} function Mailbox(props) { @@ -156,10 +152,9 @@ ReactDOM.render( ด้วยเหตุนี้ถ้าเงื่อนใขเป็น `true` แล้ว element ด้านขวาที่อยู่หลัง `&&` จะปรากฏเป็นเป็นผลลัพธ์เสมอ ถ้ามันเป็น `false` แล้ว React จะเพิกเฉยและข้ามมันไป -<<<<<<< HEAD ### Inline If-Else กับ Conditional Operator {#inline-if-else-with-conditional-operator} -======= -Note that returning a falsy expression will still cause the element after `&&` to be skipped but will return the falsy expression. In the example below, `
0
` will be returned by the render method. + +ข้อสังเกตอีกหนึ่งอย่างคือ ถึงแม้ว่า `expression` นั้นจะเป็น `false` และทำให้ผลลัพธ์ที่อยู่หลัง `&&` ถูกข้ามไป แต่ค่าที่ประมวนออกมาจะยังแสดงเป็นค่าลบ (falsy expression) ในตัวอย่างข้างล่างนี้ `
0
` จะปรากฏเป็นเป็นผลลัพธ์จากเมธอด `render`: ```javascript{2,5} render() { @@ -173,7 +168,6 @@ render() { ``` ### Inline If-Else with Conditional Operator {#inline-if-else-with-conditional-operator} ->>>>>>> bd0c9d8c5f5e78e0bd1066b46024ba98f4daac84 อีกวิธีหนึ่งสำหรับการสร้างเงื่อนใขในการแสดงผลแบบ inline คือ การใช้ JavaScript conditional operator [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator). diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index 55ab10916..3641905bf 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -8,11 +8,7 @@ redirect_from: - "docs/events-ko-KR.html" --- -<<<<<<< HEAD การจัดการเหตุการณ์ที่เกิดบน React elements นั้นมีความคล้ายคลึงกับการจัดการเหตุการณ์บน DOM elements มาก มีเพียงไวยากรณ์ที่ต่างกันเล็กน้อย -======= -Handling events with React elements is very similar to handling events on DOM elements. There are some syntax differences: ->>>>>>> 2ef0ee1e4fc4ce620dce1f3e0530471195dc64d1 * เหตุการณ์ที่เกิดบน React ใช้วิธีเขียนชื่อแบบ camelCase แทนที่จะเป็นภาษาอังกฤษตัวพิมพ์เล็ก * เราส่งฟังก์ชั่นเข้ามาเป็นตัวจัดการเหตุการณ์ใน JSX เลย แทนที่จะเป็น string @@ -58,11 +54,7 @@ function ActionLink() { } ``` -<<<<<<< HEAD -โดย `e` ในที่นี้เป็นข้อมูลที่สังเคราะห์ขึ้นจากเหตุการณ์นั้น ซึ่ง React สร้างขึ้นมาตาม[ข้อกำหนดของ W3C](https://www.w3.org/TR/DOM-Level-3-Events/) ดังนั้นจึงไม่ต้องกังวลกับการรองรับการใช้งานในหลายบราว์เซอร์ ดูรายละเอียดเพิ่มเ -======= -Here, `e` is a synthetic event. React defines these synthetic events according to the [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/), so you don't need to worry about cross-browser compatibility. React events do not work exactly the same as native events. See the [`SyntheticEvent`](/docs/events.html) reference guide to learn more. ->>>>>>> bd0c9d8c5f5e78e0bd1066b46024ba98f4daac84 +โดย `e` ในที่นี้เป็นข้อมูลที่สังเคราะห์ขึ้นจากเหตุการณ์นั้น ซึ่ง React สร้างขึ้นมาตาม[ข้อกำหนดของ W3C](https://www.w3.org/TR/DOM-Level-3-Events/) ดังนั้นจึงไม่ต้องกังวลกับการรองรับการใช้งานในหลายบราว์เซอร์ ดูรายละเอียดในบทความ [ข้อมูลสังเคราะห์](../docs/reference-events.md) เพื่อเรียนรู้เพิ่มเติม ในการเขียน React นั้น มักจะไม่จำเป็นที่ต้องเรียก `addEventListener` เพื่อเพิ่มข้อมูลการรับฟัง (listener) บน DOM element หลังจากที่มันถูกสร้าง เราเพียงแค่ให้ข้อมูลการรับฟัง(listener) เมื่อ element นั้นถูกนำไปแสดงผลในครั้งแรก diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md index 0fc7e573f..204b99022 100644 --- a/content/docs/lists-and-keys.md +++ b/content/docs/lists-and-keys.md @@ -184,14 +184,8 @@ function ListItem(props) { function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => -<<<<<<< HEAD // ถูกต้อง! Key ควรถูกกำหนดภายใน array - -======= - // Correct! Key should be specified inside the array. ->>>>>>> bd0c9d8c5f5e78e0bd1066b46024ba98f4daac84 ); return (