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

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>