【React】使用React.Fragment报错

在学习react，redux等知识，写了一个简单的404页面，如下

NonExistent.js

import React from 'react';
function NonExistent(props) {
return (
<div>
error
</div>
)
}
export default NonExistent

调用的时候用了Route

App.js

import { Route, Link, withRouter, Switch, Redirect } from 'react-router-dom';
...
<Switch>
...
<Route exact path={/error} component={NonExistent} />
...
</Switch>

这样是可以在切到/error路径时正常显示页面的。

然后我听说了有React.Fragment的用法，于是把页面改成
NonExistent.js

import React from 'react';
function NonExistent(props) {
return (
<React.Fragment>
error
</React.Fragment>
)
}
export default NonExistent

切到/error路径时，就报错了

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

【React】使用React.Fragment报错

莫非是和Route结合了不能使用这个语法？
或者是我写错了什么？
我用google和火狐浏览器都是这个错误。求指点。

回答

React.Fragment一般是用来处理多个元素返回的情况，Fragment本身不转换为任何dom元素，是个空标签，比如

render() {
  return (
    <Fragment>
      <li>hi</li>
      <li>原罪</li>
    </Fragment>
  );
}

如果不用Fragment，就得用数组包裹，

render() {
  return (
    [
      <li key="a">hi</li>,
      <li key="b">原罪</li>,
    ]
  );
}

你如果值返回一个字符串，那就直接返回就好了

render() {
  return 'error';
}

以上是 【React】使用React.Fragment报错 的全部内容， 来源链接： utcz.com/a/76866.html

回到顶部