집 >웹 프론트엔드 >JS 튜토리얼 >React의 JSX 구문 사용법에 대한 자세한 설명

React의 JSX 구문 사용법에 대한 자세한 설명

php中世界最好的语言원래의: 2018-05-24 14:41:041790검색

이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!