JSX란 무엇입니까? jsx 사용법 소개(코드 포함)

jsx란 무엇인가요? jsx의 용도는 무엇입니까? 이 기사에서 JSX가 무엇인지에 대해 알려드리겠습니다. jsx 사용법에 대한 소개(코드 포함), 구체적인 내용을 살펴보겠습니다.

대응하여 우리 페이지 콘텐츠는 JSX를 통해 작성되는데 JSX란 정확히 무엇인가요? JSX는 실제로 HTML 구조의 정보를 설명하기 위해 js 객체를 생성하는 JavaScript 객체입니다. 여기서 JSX는 HTML과 유사하지만 HTML이 아닌 js의 확장 언어라는 점을 기억하세요. 왜냐하면 JSX는 계산, 판단, 일부 js 언어 추가 등을 수행할 수도 있기 때문입니다.

jsx를 사용하는 JSX의 작업

   render() {
      return(
        <div>
           <h2>算数题</h2>
           <ul>
             <li>5+6={5+6}</li>
             <li>6+6={6+6}</li>
             <li>10*10={10*10}</li>
           </ul>
        </div>
      )
    }

은 JSX에서 {}으로 구별됩니다. HTML인가요 아니면 js인가요? , 즉, 모든 js 언어는 {}

Variables in JSX using by jsx# 🎜🎜##🎜🎜로 묶어야 합니다. #

 render() {
      const flag = true;
      return(
        <div>
            {flag ? (<div>flag为真</div>) : (<div>flag为假</div>)}
        </div>
      )
    }

jsx에서 사용되는 JSX의 스타일

JSX에서는 요소에 스타일을 추가하는 것도 스타일 속성으로 사용되지만 스타일에는 스타일이 포함됩니다.

 render() {
      var newStyle = {
        background: 'blue',
        fontSize:'15px'
      }
      return(
        <div>
            <div style={{color: &#39;red&#39;}}>颜色</div>
            <div style={newStyle}>样式</div>
        </div>
      )
    }

위의 사례를 통해 JSX에서는 스타일 속성 이름이 카멜 표기법으로 지정되어야 함을 알 수 있습니다.

#🎜 🎜#

HTML jsx를 사용하는 JSX의 태그

JSX에서는 충돌을 방지하기 위해 일부 태그 이름을 변환해야 합니다.

class를 바꿔야 합니다. by className

1. lable 요소의 for 속성은 다음과 같이 htmlFor로 대체되어야 합니다.
#🎜🎜 #

2. <label htmlFor="msg" ></label>

   #🎜🎜 # 또한 JSX의 모든 태그는 닫혀 있어야 한다는 점에 유의하세요. 태그
   관련 권장 사항:

Vue는 어떻습니까? 지원되는 JSX 구문에 대한 자세한 설명

# 🎜🎜#

JSX 구문 학습 입문 튜토리얼 JavaScript React 프레임워크_기본 지식

React에 대한 자세한 소개# 🎜🎜#

위 내용은 JSX란 무엇입니까? jsx 사용법 소개(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!