Uncaught SyntaxError: Inline Babel script: Adjacent JSX elements must be wrapped in an enclosing tag

骑猪看日落 2022-02-01 23:09 193阅读 0赞

1、错误描述

babel.min.js:7 Uncaught SyntaxError: Inline Babel script: Adjacent JSX elements must be wrapped in an enclosing tag (3:25)
      
    1 | 
      2 | 			
    function Person(info){
    > 3 | 				
    return <h1>个人信息:</h1><h3></h3>;
        | 				                     
    ^
      4 | 			}
      5 | 			
      
    6 | 			const p = <Person/>;
        
    at t.J.raise (babel.min.js:7)
    at t.ge.jsxParseElementAt (babel.min.js:8)
    at t.ge.jsxParseElement (babel.min.js:8)
    at t.parseExprAtom (babel.min.js:8)
    at te.parseExprSubscripts (babel.min.js:6)
    at te.parseMaybeUnary (babel.min.js:6) 
    at te.parseExprOps (babel.min.js:6)
    at te.parseMaybeConditional (babel.min.js:6)
    at te.parseMaybeAssign (babel.min.js:6)
    at t.parseMaybeAssign (babel.min.js:8)

2、错误原因

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script src="../js/react.development.js"></script>
    		<script src="../js/react-dom.development.js"></script>
    		<script src="../js/babel.min.js"></script>
    	</head>
    	<body>
    		<div id="showData"></div>
    		<script type="text/babel">
    			function Person(info){
    				return <h1>个人信息:</h1><h3></h3>;
    			}
    			
    			const p = <Person/>;
    			ReactDOM.render(
    				p,
    				document.getElementById('showData')
    			);
    		</script>
    	</body>
    </html>

如果在返回多个标签时，只是使用一个组件，将多个标签并列显示，会出现问题

3、解决办法

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script src="../js/react.development.js"></script>
    		<script src="../js/react-dom.development.js"></script>
    		<script src="../js/babel.min.js"></script>
    	</head>
    	<body>
    		<div id="showData"></div>
    		<script type="text/babel">
    			function Person(info){
    				return <h1>个人信息:</h1>;
    			}
    			
    			function Pname(info){
    				return <h3>张三</h3>
    			}
    			
    			function Info(k){
    				return (
    					<div>
    					   <Person/>
    					   <Pname/>
    					</div>
    				);
    			}
    			
    			const info = <Info/>;
    			ReactDOM.render(
    				info,
    				document.getElementById('showData')
    			);
    		</script>
    	</body>
    </html>