Phần tử jsx thành phần tử html

Các phần tử, thành phần và trường hợp phản ứng là các thuật ngữ khác nhau trong React hoạt động chặt chẽ với nhau. Hướng dẫn này sẽ hướng dẫn bạn qua cả ba thuật ngữ và giải thích chúng từng bước. Chúng tôi sẽ bắt đầu với đoạn mã sau làm ví dụ
Nội dung chính Show
Phản ứng các yếu tố theo chiều sâu
Gọi một thành phần chức năng phản ứng
Phản ứng các yếu tố so với các thành phần
JSX được chuyển đổi sang HTML như thế nào?
JSX có được biên dịch thành HTML không?
Làm cách nào để hiển thị thành phần React thành HTML?
Tôi có thể chuyển đổi React sang HTML không?
const App = () => {
  return <p>Hello Reactp>;
};
Một thành phần React theo nghĩa đen là phần khai báo của một thành phần như chúng ta thấy nó trong đoạn mã trước. Trong trường hợp của chúng tôi, đó là một thành phần chức năng nhưng nó có thể là bất kỳ loại thành phần React nào khác (e. g. Thành phần lớp phản ứng) cũng vậy
Trong trường hợp thành phần hàm, nó được khai báo là hàm JavaScript trả về JSX của React. Mặc dù JSX phức tạp hơn là sự kết hợp giữa HTML và JavaScript, nhưng ở đây chúng ta đang xử lý một ví dụ đơn giản chỉ trả về một phần tử HTML có nội dung bên trong
(props) => JSX
Chúng ta có thể trích xuất một thành phần từ một thành phần khác và hiển thị nó theo cách sau. Kết xuất một thành phần xảy ra bất cứ khi nào chúng ta sử dụng thành phần này làm thành phần React với dấu ngoặc nhọn (e. g. 
const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return <Greeting text="Hello React" />;
};
2) trong một thành phần khác
const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return <Greeting text="Hello React" />;
};
Chúng ta cũng có thể kết xuất một thành phần dưới dạng phần tử React nhiều lần. Bất cứ khi nào một thành phần được hiển thị dưới dạng phần tử, chúng tôi sẽ tạo một phiên bản của thành phần này
const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return (
    <>
      <Greeting text="Hello Instance 1 of Greeting" />
      <Greeting text="Hello Instance 2 of Greeting" />
    >
  );
};
Mặc dù một thành phần React được khai báo một lần, nhưng nó có thể được sử dụng nhiều lần như một thành phần React trong JSX. Khi nó được sử dụng, nó sẽ trở thành một thể hiện của thành phần và nằm trong cây thành phần của React. Về cơ bản, đó là lời giải thích ngắn gọn về các thành phần, thành phần và thể hiện của React. Tuy nhiên, để hiểu mọi thứ ở mức độ sâu hơn, chúng ta cần hiểu cách React hiển thị HTML với JSX
Phản ứng các yếu tố theo chiều sâu
Hãy lùi lại một bước và bắt đầu lại với một ví dụ đơn giản
const App = () => {
  return <p>Hello Reactp>;
};
Bất cứ khi nào một thành phần React được gọi (kết xuất), React sẽ gọi nội bộ phương thức 
const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return <Greeting text="Hello React" />;
};
3 của nó để trả về đối tượng sau
console.log(App());

// {
//   $$typeof: Symbol(react.element)
//   "type": "p",
//   "key": null,
//   "ref": null,
//   "props": {
//     "children": "Hello React"
//   },
//   "_owner": null,
//   "_store": {}
// }
Tập trung sự chú ý của bạn vào các thuộc tính 
const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return <Greeting text="Hello React" />;
};
4 và const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return <Greeting text="Hello React" />;
};
5 của đối tượng này. Trong khi const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return <Greeting text="Hello React" />;
};
4 đại diện cho phần tử HTML thực tế, thì const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return <Greeting text="Hello React" />;
};
5 là tất cả các thuộc tính HTML (cộng với nội dung bên trong, hãy đọc. con) được chuyển đến phần tử HTML này
Khi nhìn vào phần tử HTML đoạn từ phía trên, bạn có thể thấy rằng không có thuộc tính nào được chuyển cho nó. Tuy nhiên, React coi 
const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return <Greeting text="Hello React" />;
};
8 là thuộc tính HTML giả trong khi const Greeting = ({ text }) => {
  return <p>{text}p>;
};




const App = () => {
  return <Greeting text="Hello React" />;
};
8 đại diện cho mọi thứ được hiển thị giữa thẻ HTML. Thực tế này trở nên rõ ràng hơn khi thêm một thuộc tính vào phần tử HTML của đoạn văn
(props) => JSX
4Về cơ bản, React dịch tất cả các thuộc tính HTML sang các đạo cụ React ngoài việc thêm nội dung bên trong dưới dạng thuộc tính 
const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return <Greeting text="Hello React" />;
};
8
Như đã đề cập, phương thức 
const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return (
    <>
      <Greeting text="Hello Instance 1 of Greeting" />
      <Greeting text="Hello Instance 2 of Greeting" />
    >
  );
};
1 của React được gọi nội bộ. Do đó, chúng tôi có thể sử dụng nó để thay thế cho JSX đã trả về (vì mục đích học tập). Phương thức createElement của React lấy một loại, đạo cụ và phần tử con làm đối số. Chúng tôi cung cấp thẻ HTML const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return (
    <>
      <Greeting text="Hello Instance 1 of Greeting" />
      <Greeting text="Hello Instance 2 of Greeting" />
    >
  );
};
2 làm đối số đầu tiên, const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return <Greeting text="Hello React" />;
};
5 làm đối tượng với const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return (
    <>
      <Greeting text="Hello Instance 1 of Greeting" />
      <Greeting text="Hello Instance 2 of Greeting" />
    >
  );
};
4 làm đối số thứ hai và const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return <Greeting text="Hello React" />;
};
8 làm đối số thứ ba
const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return <Greeting text="Hello React" />;
};
1Xem cách gọi phương thức không phản ánh 1. 1 đối tượng được trả về trong đó 
const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return <Greeting text="Hello React" />;
};
8 là một phần của đối tượng const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return <Greeting text="Hello React" />;
};
5. Thay vào đó, khi gọi phương thức const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return (
    <>
      <Greeting text="Hello Instance 1 of Greeting" />
      <Greeting text="Hello Instance 2 of Greeting" />
    >
  );
};
1 của React, các phần tử con được cung cấp riêng dưới dạng đối số. Tuy nhiên, vì const Greeting = ({ text }) => {
  return <p>{text}p>;
};




const App = () => {
  return <Greeting text="Hello React" />;
};
8 được coi là props, nên chúng ta cũng có thể truyền chúng vào đối số thứ hai
const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return <Greeting text="Hello React" />;
};
6Theo mặc định, 
const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return <Greeting text="Hello React" />;
};
8 được sử dụng làm đối số thứ ba. Ví dụ sau đây cho thấy cách một thành phần React, hiển thị cây HTML dưới dạng JSX, chuyển thành (các) phần tử React bằng phương thức const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return (
    <>
      <Greeting text="Hello Instance 1 of Greeting" />
      <Greeting text="Hello Instance 2 of Greeting" />
    >
  );
};
1 của React. Các dòng quan trọng được đánh dấu
const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return <Greeting text="Hello React" />;
};
9Một lần nữa, trong nội bộ, tất cả JSX được dịch bằng phương thức 
const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return (
    <>
      <Greeting text="Hello Instance 1 of Greeting" />
      <Greeting text="Hello Instance 2 of Greeting" />
    >
  );
};
1 của React. Trong khi chúng ta trả về một phần tử là đối tượng, nó có nhiều phần tử bên trong là phần tử con trong ví dụ này. Điều này trở nên rõ ràng hơn khi gọi phương thức tự tạo phần tử
(props) => JSX
0Làm việc với nhiều thành phần không làm thay đổi tập hợp các phần tử HTML này. Lấy đoạn mã sau nơi chúng tôi trích xuất phần tử HTML đoạn dưới dạng thành phần React độc lập
(props) => JSX
1Nếu bạn tự mình duyệt qua các phần tử HTML cơ bản, bạn sẽ nhận thấy rằng nó không thay đổi so với trước đó. Chỉ trong vùng đất React, chúng tôi đã trích xuất nó dưới dạng thành phần có thể tái sử dụng. Vì vậy, việc gọi phương thức 
const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return (
    <>
      <Greeting text="Hello Instance 1 of Greeting" />
      <Greeting text="Hello Instance 2 of Greeting" />
    >
  );
};
1 của React sẽ giống như trước đây
Để học thêm một chút ở đây, chúng ta cũng có thể kết hợp cả hai thế giới bằng cách sử dụng thành phần được trích xuất trong lệnh gọi phương thức 
const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return (
    <>
      <Greeting text="Hello Instance 1 of Greeting" />
      <Greeting text="Hello Instance 2 of Greeting" />
    >
  );
};
1 của React làm đối số đầu tiên
(props) => JSX
2Tuy nhiên, để làm cho ví dụ hoàn chỉnh, chúng ta cũng sẽ phải thay thế JSX của thành phần con bằng 
const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return (
    <>
      <Greeting text="Hello Instance 1 of Greeting" />
      <Greeting text="Hello Instance 2 of Greeting" />
    >
  );
};
1 của React
(props) => JSX
3Bằng cách này, chúng ta chỉ làm việc với phương thức 
const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return (



    <>
      <Greeting text="Hello Instance 1 of Greeting" />
      <Greeting text="Hello Instance 2 of Greeting" />
    >
  );
};
1 của React chứ không phải JSX nữa trong khi vẫn có thể trích xuất các thành phần từ nhau. Mặc dù vậy, điều này hoàn toàn không được khuyến khích và chỉ minh họa cách React tạo các phần tử bên trong từ JSX của nó
Những gì chúng ta đã học được trong phần này là không chỉ 
const App = () => {
  return <p>Hello Reactp>;
};
7 hoặc const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return <Greeting text="Hello React" />;
};
2 là các phần tử React, mà tất cả các phần tử HTML khác trong JSX đều được dịch trong lệnh gọi React const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return (
    <>
      <Greeting text="Hello Instance 1 of Greeting" />
      <Greeting text="Hello Instance 2 of Greeting" />
    >
  );
};
1. Về cơ bản, chúng tôi làm việc với các phần tử React để hiển thị JSX mong muốn. Bởi vì chúng tôi muốn sử dụng lập trình khai báo thay vì mệnh lệnh trong React, nên chúng tôi sử dụng JSX làm mặc định chứ không phải phương thức const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return (
    <>
      <Greeting text="Hello Instance 1 of Greeting" />
      <Greeting text="Hello Instance 2 of Greeting" />
    >
  );
};
1 của React
Gọi một thành phần chức năng phản ứng
Sự khác biệt thực sự giữa việc gọi một thành phần hàm React so với sử dụng nó làm phần tử React là gì? . Thay vào đó, đầu ra khác nhau như thế nào khi sử dụng nó làm phần tử React
(props) => JSX
4Đầu ra hơi khác. Khi sử dụng một thành phần React làm thành phần thay vì gọi nó, chúng ta sẽ nhận được một hàm 
const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return <Greeting text="Hello React" />;
};
4 bao gồm tất cả các chi tiết triển khai thành phần chức năng (e. g. trẻ em, móc). const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return <Greeting text="Hello React" />;
};
5 là tất cả các thuộc tính HTML khác được chuyển đến thành phần
(props) => JSX
5Điều đó có ý nghĩa gì đối với một ứng dụng React thực sự mà 
const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return <Greeting text="Hello React" />;
};
4 trở thành một hàm và không còn là một chuỗi nữa? . Đầu tiên, chúng tôi sử dụng một thành phần như dự định bằng cách sử dụng dấu ngoặc nhọn
(props) => JSX
6Với những kiến thức đã học từ trước, chúng ta sẽ cho rằng việc gọi một thành phần chức năng thay vì sử dụng nó làm thành phần React sẽ hoạt động hiệu quả. Thật vậy, nó làm như chúng ta có thể thấy tiếp theo
(props) => JSX
7Nhưng hãy khám phá lý do tại sao chúng ta không nên gọi một React function component. Chúng tôi sẽ sử dụng kết xuất có điều kiện cho thành phần con được kết xuất có thể được bật bằng một nút bấm
(props) => JSX
8Khi chúng tôi chuyển thành phần con thành vô hình, chúng tôi gặp lỗi khi nói. "Lỗi chưa bắt được. Kết xuất ít móc hơn dự kiến. " Nếu bạn đã từng làm việc với React Hook trước đây, bạn có thể biết rằng điều này có thể thực hiện được, bởi vì hook được phân bổ trong thành phần con (tại đây. Counter), có nghĩa là nếu thành phần này không được gắn kết, vì nó được kết xuất có điều kiện, hook sẽ được gỡ bỏ mà không có bất kỳ lỗi nào. Chỉ khi một thành phần được gắn kết thay đổi số lượng móc của nó (ở đây. Ứng dụng), nó sẽ bị sập
Tiếp tục đọc. Móc có điều kiện trong React
Nhưng thực sự nó bị treo vì một thành phần được gắn kết (ở đây. Ứng dụng) thay đổi số lượng móc của nó. Bởi vì chúng tôi đang gọi thành phần con (ở đây. Counter) dưới dạng chức năng, React không coi nó là phiên bản thực tế của thành phần React. Thay vào đó, nó chỉ đặt tất cả các chi tiết triển khai (e. g. hooks) của thành phần con trực tiếp trong thành phần cha của nó. Bởi vì việc triển khai hook biến mất trong một thành phần được gắn kết (ở đây. Ứng dụng) do kết xuất có điều kiện, ứng dụng React gặp sự cố
Về cơ bản, mã hiện tại giống như mã sau, vì thành phần con không được coi là phiên bản độc lập của thành phần
(props) => JSX
9Điều này vi phạm các quy tắc của hook, vì React Hook không thể được sử dụng một cách có điều kiện trong một thành phần
Tiếp tục đọc. Tìm hiểu móc phản ứng
Chúng ta có thể khắc phục lỗi này bằng cách cho React biết về thành phần React này, thành phần này được coi là một phiên bản thực tế của thành phần. Sau đó, nó có thể phân bổ các chi tiết triển khai trong phiên bản này của thành phần. Khi quá trình kết xuất có điều kiện bắt đầu, thành phần này chỉ cần ngắt kết nối và cùng với đó là các chi tiết triển khai của nó (e. g. móc)
const Greeting = ({ text }) => {
  return <p>{text}p>;
};

const App = () => {
  return <Greeting text="Hello React" />;
};
0Tại đây bạn có thể thấy tại sao các phiên bản của các thành phần React lại có ý nghĩa. Mỗi phiên bản phân bổ các chi tiết triển khai của riêng nó mà không làm rò rỉ nó sang các thành phần khác. Do đó, chúng tôi đang sử dụng các phần tử React thay vì gọi một thành phần chức năng trong JSX. Tóm lại, một hàm trả về JSX có thể không phải là một thành phần. Nó phụ thuộc vào cách nó được sử dụng
Phản ứng các yếu tố so với các thành phần
Hãy tóm tắt các thành phần và thành phần phản ứng. Mặc dù Thành phần phản ứng là khai báo một lần của thành phần, nhưng nó có thể được sử dụng một lần hoặc nhiều lần dưới dạng Thành phần phản ứng trong JSX. Trong JSX, nó có thể được sử dụng với dấu ngoặc nhọn, tuy nhiên, bên dưới phương thức 
console.log(App());

// {
//   $$typeof: Symbol(react.element)
//   "type": "p",
//   "key": null,
//   "ref": null,
//   "props": {
//     "children": "Hello React"
//   },
//   "_owner": null,
//   "_store": {}
// }
5 của React khởi động để tạo các phần tử React dưới dạng đối tượng JavaScript cho mỗi phần tử HTML
 
			JSX được chuyển đổi sang HTML như thế nào?
			Kết luận . 
 Mỗi thẻ JSX được chuyển đổi thành React.  .  
 Biểu thức JSX, được viết bên trong dấu ngoặc nhọn, chỉ cho phép những thứ đánh giá một số giá trị như chuỗi, số, phương thức bản đồ mảng, v.v.
 Trong React, chúng ta phải sử dụng className thay vì class để thêm các lớp vào phần tử HTML
 
		
			JSX có được biên dịch thành HTML không?
			JSX là viết tắt của phần mở rộng cú pháp JavaScript.  Đó là một phần mở rộng của JavaScript cho phép chúng ta mô tả cây đối tượng của React bằng cú pháp giống với cú pháp của mẫu HTML . Nó chỉ là một phần mở rộng giống như XML cho phép chúng tôi viết JavaScript trông giống như đánh dấu và trả về nó từ một thành phần. 
		
			Làm cách nào để hiển thị thành phần React thành HTML?
			Mục tiêu của React theo nhiều cách là hiển thị HTML trong một trang web. React kết xuất HTML cho trang web bằng cách  sử dụng chức năng có tên là ReactDOM. kết xuất() . 
		
			Tôi có thể chuyển đổi React sang HTML không?
			Có, cả ứng dụng Angular và React đều có thể (và thường được) "xây dựng" thành HTML, CSS và JS tĩnh . Các thiết lập mặc định cho cả hai (sử dụng Angular CLI hoặc Tạo ứng dụng React) bao gồm một lệnh để thực hiện điều đó.
programming html
Phần tử jsx thành phần tử html

Phản ứng các yếu tố theo chiều sâu

Gọi một thành phần chức năng phản ứng

Phản ứng các yếu tố so với các thành phần

JSX được chuyển đổi sang HTML như thế nào?

JSX có được biên dịch thành HTML không?

Làm cách nào để hiển thị thành phần React thành HTML?

Tôi có thể chuyển đổi React sang HTML không?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội
