React의 JSX 구문 사용법에 대한 자세한 설명
이번에는 React에서 JSX 문법을 사용하는 방법에 대해 자세하게 설명을 들고 왔습니다. React에서 JSX 문법을 사용할 때 주의사항은 무엇인가요?
JSX 구문
코드에서 html 태그를 객체로 사용할 수 있는 특수 js 구문 설탕입니다. 다음과 같은 특징으로 요약할 수 있습니다.
따옴표가 없습니다
과거에는 js에서 html 태그를 사용했습니다. 따옴표가 있는 string으로 사용되지만 jsx 구문에서는 따옴표를 추가할 필요가 없으며 객체로 직접 사용됩니다
var html = <h1>React</h1>;
태그에는 해당 닫는 태그 또는 끝 태그가 있어야 합니다.
때때로 우리는 글을 쓰고 있습니다 html 구조 당시에는 해당 종료 태그가 추가되지 않았지만 브라우저에서는 정상적으로 구문 분석할 수 있습니다. 그러나 jsx 구문에서는 강제로 표준 html 구조를 작성해야 합니다.
html 태그의 이 단락은 다음과 같이 정상적으로 구문 분석할 수 있습니다. browser
<input type="text" value="React">
이 문단 jsx 구문에서는 오류가 보고됩니다
var html = <input type="text" value="React">;
jsx의 올바른 작성 방법은 다음과 같아야 합니다
var html = <input type="text" value="React" />; var p = <p>React</p>;
루트 노드는 하나만 있을 수 있습니다
jsx 구문에서는 최상위 수준 구조에는 노드가 하나만 있어야 하며 형제 노드는 나타날 수 없습니다
var html = <p> <h1>Tom</h1> <h1>Lucy</h2> </p>
No 태그에 주석 추가
jsx 구문에서 html 태그는 실제 dom 노드나 문자열이 아닌 개체, 데이터 구조이므로 주석은 태그에 추가할 수 없습니다.
아래 코드는 태그에 주석을 추가하므로 오류가 보고됩니다.
var html = <p> <!--不能添加注释，这里会报错--> <h1>Tom</h1> <h1>Lucy</h2> </p>
jsx 구문을 사용하면 html 태그와 javascript 코드
를 혼합할 수 있습니다. jsx 구문에서 html 태그에 js 코드를 사용하려면 중괄호({expression})를 사용하세요.
var name = "DK";
var style = {fontSize: '12px', color: 'red'};
var html = <span style={style}>{name}</span>;결국 위 코드는
<span style="font-size:12px; color:red">DK</span>
React 사용법
React는 타사 프레임워크 라이브러리이므로 사용하기 전에 관련 라이브러리 파일을 가져와야 합니다.
<!--React 核心库--> <script src="../../../../libs/react/react.js"></script> <!--React 跟 Dom 相关的功能库--> <script src="../../../../libs/react/react-dom.js"></script> <!--babel 库，将 JSX 语法转为 JavaScript 语法--> <script src="../../../../libs/react/browser.min.js"></script>
React는 jsx 구문을 기반으로 구현되므로 스크립트 유형을 text/babel로 지정해야 합니다
<script type="text/bebal"></script>
React의 핵심 객체와 메소드를 사용ReactDOM.render하여 html 태그를 지정된 컨테이너에 렌더링합니다
<body>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
<!--jsx 语法-->
<script type="text/babel">
//将标签直接渲染到容器 p1 当中
ReactDOM.render(<h1>DK</h1>, document.getElementById('p1'));
var _style = {fontSize: '12px', color: 'red'};
var _name = "Tom";
var _obj = {name: "DK", age: 18};
//标签与 js 代码混写
ReactDOM.render(<h1 style={_style}>{_obj.age + (1 + 2)}</h1>, document.getElementById('p2'));
var array = ["Tom", "Lucy", "Lily"];
//多级标签和 js 代码混写
ReactDOM.render(
<p>
<ul>
{
array.map(function(arg1, arg2){
return <li key={arg2}>{arg1}</li>;
})
}
</ul>
<ul><li>Sam</li></ul>
<ul><li><input type="text" /></li></ul>
</p>,
document.getElementById('p3')
);
</script>
</body>믿습니다 이 기사의 사례를 읽으십시오. 더 흥미로운 정보를 얻으려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
JS에서 인터페이스를 사용하는 단계에 대한 자세한 설명
위 내용은 React의 JSX 구문 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7563
15
1385
52
84
11
61
19
28
99
Win11에서 관리자 권한을 얻는 방법에 대한 자세한 설명
Mar 08, 2024 pm 03:06 PM
Windows 운영 체제는 세계에서 가장 인기 있는 운영 체제 중 하나이며, 새로운 버전의 Win11이 많은 주목을 받았습니다. Win11 시스템에서 관리자 권한을 얻는 것은 사용자가 시스템에서 더 많은 작업과 설정을 수행할 수 있도록 하는 중요한 작업입니다. 이번 글에서는 Win11 시스템에서 관리자 권한을 얻는 방법과 권한을 효과적으로 관리하는 방법을 자세히 소개하겠습니다. Win11 시스템에서 관리자 권한은 로컬 관리자와 도메인 관리자의 두 가지 유형으로 나뉩니다. 로컬 관리자는 로컬 컴퓨터에 대한 모든 관리 권한을 갖습니다.
Oracle SQL의 나누기 연산에 대한 자세한 설명
Mar 10, 2024 am 09:51 AM
OracleSQL의 나눗셈 연산에 대한 자세한 설명 OracleSQL에서 나눗셈 연산은 두 숫자를 나눈 결과를 계산하는 데 사용되는 일반적이고 중요한 수학 연산입니다. 나누기는 데이터베이스 쿼리에 자주 사용되므로 OracleSQL에서 나누기 작업과 사용법을 이해하는 것은 데이터베이스 개발자에게 필수적인 기술 중 하나입니다. 이 기사에서는 OracleSQL의 나누기 작업 관련 지식을 자세히 설명하고 독자가 참고할 수 있는 특정 코드 예제를 제공합니다. 1. OracleSQL의 Division 연산
PHP 모듈로 연산자의 역할과 사용법에 대한 자세한 설명
Mar 19, 2024 pm 04:33 PM
PHP의 모듈로 연산자(%)는 두 숫자를 나눈 나머지를 구하는 데 사용됩니다. 이 글에서는 모듈로 연산자의 역할과 사용법을 자세히 논의하고 독자의 이해를 돕기 위해 구체적인 코드 예제를 제공합니다. 1. 모듈로 연산자의 역할 수학에서는 정수를 다른 정수로 나누면 몫과 나머지가 나옵니다. 예를 들어 10을 3으로 나누면 몫은 3이고 나머지는 1입니다. 이 나머지를 얻기 위해 모듈로 연산자가 사용됩니다. 2. 모듈러스 연산자의 사용법 PHP에서는 모듈러스를 나타내기 위해 % 기호를 사용합니다.
PHP, Vue 및 React: 가장 적합한 프런트엔드 프레임워크를 선택하는 방법은 무엇입니까?
Mar 15, 2024 pm 05:48 PM
PHP, Vue 및 React: 가장 적합한 프런트엔드 프레임워크를 선택하는 방법은 무엇입니까? 인터넷 기술이 지속적으로 발전함에 따라 프런트엔드 프레임워크는 웹 개발에서 중요한 역할을 합니다. PHP, Vue, React는 세 가지 대표적인 프론트엔드 프레임워크로 각각 고유한 특성과 장점을 가지고 있습니다. 사용할 프런트 엔드 프레임워크를 선택할 때 개발자는 프로젝트 요구 사항, 팀 기술 및 개인 선호도를 기반으로 정보를 바탕으로 결정을 내려야 합니다. 이 글에서는 세 가지 프론트엔드 프레임워크인 PHP, Vue, React의 특징과 용도를 비교해보겠습니다.
리눅스 시스템콜 system() 함수에 대한 자세한 설명
Feb 22, 2024 pm 08:21 PM
Linux 시스템 호출 system() 함수에 대한 자세한 설명 시스템 호출은 Linux 운영 체제에서 매우 중요한 부분으로 시스템 커널과 상호 작용하는 방법을 제공합니다. 그 중 system() 함수는 흔히 사용되는 시스템 호출 함수 중 하나이다. 이 기사에서는 system() 함수의 사용법을 자세히 소개하고 해당 코드 예제를 제공합니다. 시스템 호출의 기본 개념 시스템 호출은 사용자 프로그램이 운영 체제 커널과 상호 작용하는 방법입니다. 사용자 프로그램은 시스템 호출 기능을 호출하여 운영 체제를 요청합니다.
Java 프레임워크와 프런트엔드 React 프레임워크의 통합
Jun 01, 2024 pm 03:16 PM
Java 프레임워크와 React 프레임워크의 통합: 단계: 백엔드 Java 프레임워크를 설정합니다. 프로젝트 구조를 만듭니다. 빌드 도구를 구성합니다. React 애플리케이션을 만듭니다. REST API 엔드포인트를 작성합니다. 통신 메커니즘을 구성합니다. 실제 사례(SpringBoot+React): Java 코드: RESTfulAPI 컨트롤러를 정의합니다. React 코드: API에서 반환된 데이터를 가져오고 표시합니다.
Linux 컬 명령에 대한 자세한 설명
Feb 21, 2024 pm 10:33 PM
Linux의 컬 명령에 대한 자세한 설명 요약: 컬은 서버와의 데이터 통신에 사용되는 강력한 명령줄 도구입니다. 이 글에서는 컬 명령어의 기본적인 사용법을 소개하고, 독자들이 명령어를 더 잘 이해하고 적용할 수 있도록 실제 코드 예제를 제공할 것입니다. 1. 컬이란 무엇인가? 컬은 다양한 네트워크 요청을 보내고 받는 데 사용되는 명령줄 도구입니다. HTTP, FTP, TELNET 등과 같은 다중 프로토콜을 지원하며 파일 업로드, 파일 다운로드, 데이터 전송, 프록시와 같은 풍부한 기능을 제공합니다.
C#의 재귀 알고리즘에 대한 심층 분석
Feb 19, 2024 pm 08:09 PM
C#의 재귀 알고리즘에 대한 자세한 설명, 구체적인 코드 예제가 필요합니다. 1. 재귀 알고리즘이란 무엇입니까? 재귀는 함수나 메서드가 실행 중에 자신을 호출하는 것입니다. 재귀 알고리즘은 프로그래밍에서 일반적인 문제 해결 방법입니다. 문제를 원래 문제와 유사하지만 크기가 더 작은 하나 이상의 하위 문제로 분해한 다음 이러한 하위 문제를 해결하여 원래 문제를 해결합니다. 반복적인 문제를 해결하기 위해 재귀 알고리즘이 자주 사용됩니다. 2. 재귀 알고리즘을 구현하는 방법 C#에서는 재귀 알고리즘을 구현하는 두 가지 주요 방법, 즉 직접 재귀와 간접 재귀가 있습니다. 똑바로
