H5W3
当前位置:H5W3 > JavaScript > React > 正文

【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';
}

本文地址:H5W3 » 【React】使用React.Fragment报错

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址