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>