React 개발 - JSX 사용 및 상세 설명
원본 주소:http://blog.csdn.net/pcaxb/article/details/53927761
React 개발 - JSX 사용 및 상세 설명
HTML 언어 는 자바 스 크 립 트 언어 에 직접 쓰 이 고 따옴표 가 붙 지 않 습 니 다. 이것 이 바로 JSX 의 문법 입 니 다. HTML 과 자바 스 크 립 트 의 혼합 을 허용 합 니 다.JSX 는 자바 스 크 립 트 의 확장 으로 볼 수 있 으 며 XML 문법 처럼 보인다.
render(){
let datas = [1,2,3,4];
let arrays = [
01,
02,
03
];
return
{
datas.map(function(data){
return {datas+":"+data};
})
}
{
arrays
}
{
[1].map(function(data){
if(data==1){
return true+":"+data;
}else{
return false+":"+data;
}
})
}
}위의 코드 는 JSX 의 기본 문법 규칙 을 구현 했다. HTML 탭 (< 시작) 을 만나면 HTML 규칙 으로 해석한다.코드 블록 ({로 시작) 을 만나면 자 바스 크 립 트 규칙 으로 해석 합 니 다. 1. 속성 표현 식 이 HTML 에 자 바스 크 립 트 변수 값 을 섞 을 필요 가 있 으 면 {} 을 사용 해 야 합 니 다. """를 사용 하면 문자열 이 됩 니 다.
// Person
let Person = React.createClass({
render(){
return {this.props.name}
}
});
//JSX
// JS
React.createElement(Person,{name:1});
// Person div
React.createElement('div',null,React.createElement(Person,{name:1})); 이 방법의 첫 번 째 매개 변 수 는 HTML 표준 에 있 는 요소 나 ReactClass 형식의 대상 을 나타 내 는 문자열 일 수 있 습 니 다. 이전에 봉 인 된 사용자 정의 구성 요 소 를 표시 합 니 다. 두 번 째 매개 변 수 는 대상 이거 나 사전 이 라 고 해도 됩 니 다. 이 요소 의 모든 고유 속성 (즉, 들 어 오 면 기본적으로 변 하지 않 는 값) 을 저장 합 니 다.. 세 번 째 매개 변수 부터 시작 하여 그 다음 매개 변 수 는 모두 요소 의 하위 요소 로 인 식 됩 니 다. 설명: React 로 개발 할 때 반드시 JSX 문법 을 사용 해 야 하 는 것 은 아니 며, 원생 의 JS 개발 을 직접 사용 할 수 있 습 니 다. 그러나 공식 적 으로 JSX 문법 을 사용 하 는 것 을 추천 합 니 다. 외부 JSX 는 HTML 이라는 트 리 구성 을 정의 할 때 매우 간단 하고 편리 하기 때 문 입 니 다. JSX 는 개폐 라벨 이 있어 복잡 한 트 리 구 조 를 구축 할 때 함수 보다 호출 됩 니 다.대상 의 글자 크기 와 함께 읽 기 쉽 습 니 다. JSX 를 사용 한 후 에는 babel 해상도 기 를 사용 하여 JSX 를 JS 문법 으로 바 꿔 야 합 니 다.방식, JS 주석 과 CSS 주석 을 간접 적 으로 사용 할 수 있 습 니 다. HTML 주석: CSS 주석:/* CSS 주석 */JS 주석: 한 줄 주석//JS 한 줄 주석, 여러 줄 주석/* JS 여러 줄 주석 */, 여러 줄 주석 은 CSS 주석 과 같 습 니 다.
// /* */, :
// {}, :
{
/* */
//
} 설명: 괄호 안에 JS 코드 가 적 혀 있 기 때문에 JS 주석 을 사용 할 수 있 습 니 다. CSS 주석 은 JS 의 여러 줄 주석 과 같 기 때문에 사용 할 수 있 습 니 다. 3. If - Else 는 JSX 에서 {} 에 if - else 를 직접 추가 할 수 없습니다. 아래 의 3 원 표현 식 을 사용 할 수 있 습 니 다.
JSX 에서 간접 적 으로 if - else 를 사용 하 는 기술
let data = 0;
let data = 0;
let result = '';
componentWillMount(){
if(data==1){
result = " :1";
}else{
result = " : 1";
}
}//
설명: 3 원 표현 식 이 당신 의 요 구 를 만족 시 킬 수 있다 면 3 원 표현 식 을 사용 하 십시오. 3 원 표현 식 이 당신 의 요 구 를 만족 시 키 지 못 하면 if - else 를 간접 적 으로 사용 할 수 있 습 니 다. 위의 사용 방식 을 제외 하고 비교 연산 자 "|"을 사용 하여 쓸 수 있 습 니 다. 왼쪽 값 이 사실 이 라면 왼쪽 값 으로 돌아 갑 니 다. 그렇지 않 으 면 오른쪽 값 으로 돌아 갑 니 다. if 의 효과 와 같 습 니 다.
var HelloMessage = React.createClass({
render: function() {
return Hello {this.props.name || "World"};
}
});4. 함수 식 () 은 강제 연산 의 역할 을 합 니 다. 여 기 는 (4) 의 확장 이 라 고 할 수 있 습 니 다. 안에 if - else, for 등 문 구 를 사용 할 수 있 습 니 다.
//1
{
(
() => {
//1. this , this
//2.() , function
//3.
return ' 1';
}
)()
}
//2
{
(
function(){
//1.(this)
//2. this, this
//3.
return ' 1';
}(this)
)
}
//3
{
(
function(){
//1.(this)
//2. this, this
//3.
return ' 2';
})(this)
}5. 태그 의 속성 className 과 htmlFor 는 React 에서 태그 의 속성 class 와 for 를 사용 할 때 className 과 htmlFor 로 써 야 합 니 다. JSX 를 사용 하 든 말 든 두 속성 은 JavaScript 의 보존 글자 와 키워드 이기 때 문 입 니 다.
6. 이니셜 소문 자 냐 대문자 냐 의 문제 가 HTML 라벨 을 과장 하고 성명 변 수 는 이니셜 소문 자 를 사용한다.
渲染React组件，声明变量采用首字母大写var myDivElement =;
var MyComponent = React.createClass({/*...*/});설명: 변수 설명 을 통 해 HTML 태그 와 React 구성 요소 7. JSX 확장 속성 을 구분 합 니 다 (1) props 를 바 꾸 지 마 십시오. 구성 요소 의 속성 을 미리 알 았 다 면 쓰기 쉽 습 니 다. 예 를 들 어 component 구성 요 소 는 두 개의 동적 속성 foo 와 bar 가 있 습 니 다.
var component = ; 실제로 일부 속성 은 추 후 추 가 될 수 있 습 니 다. 우 리 는 처음부터 확인 할 수 없습니다. 우 리 는 아래 의 좋 지 않 은 코드 를 쓸 수 있 습 니 다.
var component = ;
component.props.foo = x; // bad
component.props.bar = y; // also bad 이렇게 쓰 는 것 은 잘못된 것 입 니 다. 수 동 으로 직접 추 가 된 속성 React 이후 속성 유형 오 류 를 검사 할 수 없습니다. 즉, 수 동 으로 추 가 된 속성 에 유형 오류 가 발생 했 을 때 콘 솔 에 서 는 오류 정 보 를 볼 수 없습니다. React 설정 에서 props 를 초기 화 한 후 props 는 변 할 수 없습니다. props 를 바 꾸 면 상상 할 수 없 는 결 과 를 초래 할 수 있 습 니 다. (2)확장 속성 (1) 의 문 제 를 해결 하기 위해)
//
let Person = React.createClass({
getDefaultProps(){
return {name:' ',age:12};
},
render(){
return Name:{this.props.name}
Age:{this.props.age}
}
});
//
{
(
()=>{
let props = {};
props.name = ' ';
props.age = 21;
return
}
)()
} 설명: 개발 은 {... props} 을 통 해 확장 속성 을 도입 할 수 있 습 니 다. props 는 하나의 대상 이 고 대상 에 속성 을 추가 합 니 다. 덮어 쓰기 속성 이 필요 하 다 면 여기 age 처럼 다시 추가 할 수 있 습 니 다. 8. HTML 전의
// ,
let richText = ' ,a ';
//
{richText}이것 은 richText 입 니 다. 분명 문자열 로 여 겨 질 것 입 니 다. 화면 에 '이것 을 넣 으 면 배경 에서 돌아 오 는 부 텍스트 입 니 다. a 안에 탭 이 많 습 니 다.' 인터페이스 에서 돌아 오지 않 으 면 따옴표 로 지 울 수 있 습 니 다. 문자열 let richText = 이것 을 넣 으 면 배경 에서 돌아 오 는 부 텍스트 입 니 다. a안 에는 많은 탭 안에 많은 탭 이 있 습 니 다. 이렇게 하면 정상 적 인 것 으로 표 시 됩 니 다. "배경 에서 돌아 오 는 부 텍스트 를 추가 합 니 다. a 에는 많은 탭 이 있 습 니 다."인터페이스 에서 돌아 오 는 부 텍스트 라면 JSON 이 보 내 온 문자열 이기 때문에 우 리 는 여기 서 따옴표 를 지 울 수 있 는 것 이 아니 라 dangerously SetInnerHTML 속성 을 사용 할 수도 있 고 정상 적 인 것 을 표시 할 수도 있 습 니 다.
说明:React默认会进行HTML的转义，避免XSS攻击，如果要不转义，可以使用dangerouslySetInnerHTML属性
除了使用dangerouslySetInnerHTML属性以外还可以直接使用innerHTML,示例如下:
通过React的ref获取到元素DOM然后设置innerHTML属性,当然也可以通过其他方式获取到元素的节点,ref只是React的方式。this.refs.fwb.innerHTML = ' ,a ';
9.自定义HTML属性
如果在编写React过程中使用了自定义属性，React是不会渲染的,比如:
React.render(
content,
document.body
);React 를 작성 하 는 과정 에서 사용자 정의 속성 을 사용 하려 면 다음 형식 으로 써 야 합 니 다.
React.render(
content,
document.body
);10. React 의 style = {}} 여기 서 가장 바깥쪽 {} 은 JSX 에 게 JS 문법 이 라 고 알려 주 는 것 입 니 다. 안에 있 는 {} 은 스타일 의 속성 값 이 대상 일 뿐 이 고 낙타 봉 이름 도 사용 해 야 합 니 다. background - color 를 사용 할 수 없습니다. backgroundColor 11. JSX 닫 기 탭 (HTML 일부 탭 은 닫 지 않 아 도 됩 니 다. 예 를 들 어
React 개발 - JSX 사용 및 상세 설명
블 로그 주소:http://blog.csdn.net/pcaxb/article/details/53927761
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
dig 도메인 이름 조회 도구 명령 [DNS]자세히 보기 명령 출력 설명: dig www.baidu.com...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
