Question

我在React中有一个要在index.js中导入的组件，但是它给出了这个错误：render没有返回任何内容。这通常意味着缺少return语句。或者，要不显示任何内容，请返回null

import React, { Component } from 'react';
import './App.css';

const Intro = (props) => {
  <p className="App-intro">
    To get started, edit <code>src/App.js</code> and save to reload
  </p>
}
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">

          <h1 className="App-title">TV Series list</h1>
        </header>
        <Intro />
      </div>
    );
  }
}

export default App;

Answer 1

您的代码：

const Intro = (props) => {
  <p className="App-intro">
    To get started, edit <code>src/App.js</code> and save to reload
  </p>
}

没有return语句。

如果将其包装在括号{}中，则需要在组件内包含return语句。不过，如果用括号括起来，则不必这样做，因为语法意味着返回

此外，您不会导出Intro

Answer 2

const Intro = (props) => (
  <p className="App-intro">
    To get started, edit <code>src/App.js</code> and save to reload
  </p>
)

OR

const Intro = (props) => {
  return (<p className="App-intro">
    To get started, edit <code>src/App.js</code> and save to reload
  </p>);
}

在您的代码中，您已经在箭头函数正文中使用了{}，但是它没有返回任何内容，因此没有元素/组件正在呈现。您可以使用上述任何一种方法从箭头函数返回值。这里()假定主体中唯一的语句是 return 语句，而{}需要显式的 return 语句。

您的错误声明可能是因为Intro是一个无状态组件。

Answer 3

如果您所说的文件名为def deleteRowsAdded = { while (driver.findElements(By.xpath(dataRowsSelector)).size() > initialRowCount) { WebUI.callTestCase(findTestCase('DeleteStore'), [('shouldLogout') : true, ('shouldCloseBrowser') : true, ('loginAndCompanySelect') : true , ('index') : initialRowCount], FailureHandling.STOP_ON_FAILURE) } } @TearDown def tearDown() { deleteRowsAdded() if (shouldLogout) { WebUI.click(findTestObject('Object Repository/Page_Sign In/li_Sign Out')) } if (shouldCloseBrowser) { WebUI.closeBrowser() } }，则可能是错误。

您的代码中包含jsx，因此您的文件必须命名为： index.js

:)

react js中的组件未呈现

3 个答案: