ตอบโต้ JSX

JSX คืออะไร?

JSX ย่อมาจาก JavaScript XML

JSX ช่วยให้เราเขียน HTML ใน React

JSX ช่วยให้เขียนและเพิ่ม HTML ใน React ได้ง่ายขึ้น

การเข้ารหัส JSX

JSX ช่วยให้เราสามารถเขียนองค์ประกอบ HTML ใน JavaScript และวางไว้ใน DOM โดยไม่ต้องใช้createElement()  และ/หรือ appendChild()วิธีการใดๆ

JSX แปลงแท็ก HTML เป็นองค์ประกอบตอบสนอง

นี่คือตัวอย่างสองตัวอย่าง อันแรกใช้ JSX และอันที่สองไม่:

const myelement = <h1>I Love JSX!</h1>;

ReactDOM.render(myelement, document.getElementById('root'));

const myelement = React.createElement('h1', {}, 'I do not use JSX!');

ReactDOM.render(myelement, document.getElementById('root'));

ดังที่คุณเห็นในตัวอย่างแรก JSX ช่วยให้เราสามารถเขียน HTML ได้โดยตรงภายในโค้ด JavaScript

JSX เป็นส่วนขยายของภาษา JavaScript ที่ใช้ ES6 และได้รับการแปลเป็น JavaScript ปกติที่รันไทม์

นิพจน์ใน JSX

{ }ด้วย JSX คุณสามารถเขียนนิพจน์ ภายในวงเล็บปีกกา

นิพจน์อาจเป็นตัวแปร React หรือคุณสมบัติ หรือนิพจน์ JavaScript ที่ถูกต้องอื่นๆ JSX จะดำเนินการนิพจน์และส่งคืนผลลัพธ์:

const myelement = <h1>React is {5 + 5} times better with JSX</h1>;

การแทรก HTML บล็อกขนาดใหญ่

หากต้องการเขียน HTML หลายบรรทัด ให้ใส่ HTML ไว้ในวงเล็บ:

const myelement = (
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>
);

หนึ่งองค์ประกอบระดับบนสุด

รหัส HTML ต้องห่อด้วยองค์ประกอบระดับบนสุดหนึ่งรายการ

ดังนั้น หากคุณต้องการเขียนสองย่อหน้า คุณต้องใส่ไว้ในองค์ประกอบหลัก เช่นdivองค์ประกอบ

const myelement = (
  <div>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </div>
);

หรือคุณสามารถใช้ "ส่วนย่อย" เพื่อรวมหลายบรรทัด ซึ่งจะป้องกันไม่ให้มีการเพิ่มโหนดเพิ่มเติมใน DOM โดยไม่จำเป็น

แฟรกเมนต์ดูเหมือนแท็ก HTML เปล่า<></>:

const myelement = (
  <>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </>
);

ต้องปิดองค์ประกอบ

JSX ปฏิบัติตามกฎ XML ดังนั้นองค์ประกอบ HTML จะต้องปิดอย่างเหมาะสม

const myelement = <input type="text" />;

คลาสแอตทริบิวต์ = className

แอตทริบิวต์classเป็นแอตทริบิวต์ที่ใช้กันอย่างแพร่หลายใน HTML แต่เนื่องจาก JSX แสดงผลเป็น JavaScript และ classคำหลักเป็นคำสงวนใน JavaScript คุณไม่ได้รับอนุญาตให้ใช้ใน JSX

JSX แก้ไขสิ่งนี้โดยใช้classNameแทน เมื่อแสดงผล JSX จะแปลclassName แอตทริบิวต์เป็นclassแอตทริบิวต์

const myelement = <h1 className="myclass">Hello World</h1>;

เงื่อนไข - ถ้างบ

React รองรับifคำสั่ง แต่ไม่ใช่ภายใน JSX

เพื่อให้สามารถใช้ข้อความสั่งแบบมีเงื่อนไขใน JSX ได้ คุณควรวางif คำสั่งนั้นไว้นอก JSX หรือคุณสามารถใช้ ternary expression แทนได้:

ตัวเลือกที่ 1:

เขียนifคำสั่งนอกรหัส JSX:

const x = 5;
let text = "Goodbye";
if (x < 10) {
  text = "Hello";
}

const myelement = <h1>{text}</h1>;

ตัวเลือกที่ 2:

ใช้นิพจน์ไตรภาคแทน:

const x = 5;

const myelement = <h1>{(x) < 10 ? "Hello" : "Goodbye"}</h1>;

const paragraph = React.createElement(, {}, 'This is a paragraph without using JSX!');

ReactDOM.render(paragraph, document.getElementById('root'));