渲染未返回任何内容。这通常意味着缺少return语句。或者，不渲染任何内容，则返回null

运行Jest测试时遇到了此错误。安装文件中正在模拟其中一个组件，因此当我尝试在测试中使用实际的组件时，我得到了非常意外的结果。

jest.mock("components/MyComponent", () => ({ children }) => children);

删除该模拟程序（实际上并不需要）可以立即解决我的问题。

当您知道从组件中正确返回时，这可能会节省您几个小时的研究时间。

相同的错误，不同的情况。我将其发布在这里是因为有人可能与我的处境相同。

我正在使用如下上下文API。

export const withDB = Component => props => {
    <DBContext.Consumer>
        {db => <Component {...props} db={db} />}
    </DBContext.Consumer>
}

因此，基本上，错误消息为您提供了答案。

渲染未返回任何内容。这通常意味着缺少return语句

withDB应该返回一个html块。但这并没有返回任何东西。将我的代码修改为以下内容可以解决我的问题。

export const withDB = Component => props => {
  return (
    <DBContext.Consumer>
        {db => <Component {...props} db={db} />}
    </DBContext.Consumer>
  )
}

在下一行写括号以在下一行不返回。

不正确的 return ( statement1 statement2 ....... ....... )

正确

return( statement1 statement2 ......... ......... )

我收到了此错误消息，但这是一个真正的基本错误，我已经将另一个Component复制/粘贴为模板，从render（）中删除了所有内容，然后将其导入并添加到父级JSX中，但尚未重命名该组件类。因此，错误看起来像是来自另一个组件，我花了一段时间尝试对其进行调试，然后才能发现它实际上不是该组件引发错误！将文件名作为错误消息的一部分会有所帮助。希望这对某人有帮助。

哦，旁注说明我不确定有人提到返回undefined会引发错误：

render() {
  return this.foo // Where foo is undefined.
}

问题似乎在于返回时的括号。括号应与以下return语句一致：

return(
)

但不是这样：

return
(
)  

假设您将无状态组件用作箭头函数，则内容需要放入括号“（）”而不是括号“ {}”，并且必须删除返回函数。

const Search_Bar= () => (
    <input />; 
);

得到了答案：后面不应该使用括号 return ()。这有效：

return  <div> <Search_Bar /> </div>

如果要写多行，那么 return ( ...

您的起始括号应与放在同一行return。

出现此错误的原因有很多：

1. 如上所述，在新行上开始括号。

错误：

render() {
  return  
  (
    <div>I am demo data</div>
  )
}

正确的实施方式render：

render() {
  return (
    <div>I am demo html</div>
  );
}

在上面的示例中，return语句末尾的分号不会有任何区别。

2. 也可能是由于布线中使用了错误的括号引起的：

错误：

export default () => {
  <BrowserRouter>
    <Switch>
      <Route exact path='/' component={ DemoComponent } />
    </Switch>
  </BrowserRouter>
}

正确方法：

export default () => (
  <BrowserRouter>
    <Switch>
      <Route exact path='/' component={ DemoComponent } />
    </Switch>
  </BrowserRouter>
)

在错误示例中，我们使用了花括号，但必须使用圆括号。这也会产生相同的错误。

问题出在返回中，请尝试以下操作：

return(
);

这解决了我的问题

花括号中包含一个组件，即{and }：

const SomeComponent = () => {<div> Some Component Page </div>}

用圆括号ie替换它们，(并)修复问题：

const SomeComponent = () => (<div> Some Component Page </div>)

我在render（）方法中遇到了同样的问题。当您从render（）返回时，问题来了：

render() {
    return 
    (
        <div>Here comes JSX !</div>
    );
}

即如果您在新行中开始括号

尝试使用：

render() {
    return (
        <div>Here comes JSX !</div>
    );
}

这样可以解决错误