Привет, я уверен, что это своего рода ага-момент, с которым, должно быть, сталкивался каждый программист JavaScript, который сначала пытался изучить React, а затем JavaScript (не идеальная ситуация). нашему проекту нужен интерфейс React для бэкэнда SAP.
А затем вы вернетесь к пониманию основ JavaScript и поймете, что происходит в React.
Ниже приведен базовый пример на JavaScript и HTML, который может помочь тем, кто пытается понять, как работает JSX, используя простой JavaScript и HTML.
В основном индексном файле есть кнопка для запуска оператора карты, который заполняет div результирующим списком (например, JSX).
Индекс.html
<!DOCTYPE html> <html> <head> <title>JSX Map operator</title> <meta charset="UTF-8" /> </head> <body> <p><button id="mapButton">1.Map operator</button></p> <div id="mapListResult"></div> <div id="app"></div> <script src="src/index.js"></script> </body> </html>
Прикрепите прослушиватель событий к кнопке и вызовите оператор карты.
index.js
import { testMap } from "./map.js";
const showMapbutton = document.querySelector("#mapButton");
showMapbutton.addEventListener("click", () => {
console.log("Map operator clicked");
testMap();
});
Файл с кодом оператора карты.
карта.js
function createStudent(im_studentID, im_studentName, im_studentCity) {
this.studentID = im_studentID;
this.studentName = im_studentName;
this.studentCity = im_studentCity;
}
const originalStudents = [
new createStudent(100, "Student1", "Sydney"),
new createStudent(200, "Student2", "Melbourne"),
new createStudent(300, "Student3", "Brisbane"),
new createStudent(400, "Student4", "Adelaide")
];
export const testMap = () => {
const mapListResult = document.getElementById("mapListResult");
mapListResult.innerHTML = createHtmlList();
};
export const createHtmlList = () => {
const newArrayHtml = originalStudents.map((currStudent) => {
return `<h2>${currStudent.studentName}</h2><br/><hr/>`;
});
return newArrayHtml;
};
коды и ссылка на ящик:
https://codesandbox.io/embed/elegant-jerry-xynhxz?fontsize=14&hidenavigation=1&theme=dark
Ссылка на ютуб:
