Reactjs：渲染没有返回任何内容答案

【问题标题】：Reactjs: Nothing Was Returned From RenderReactjs：渲染没有返回任何内容
【发布时间】：2018-08-06 07:34:23
【问题描述】：

我已经使用create-react-app 设置了一个基本的反应应用程序并创建了我的第一个组件。但是，由于浏览器窗口中出现此错误，项目无法构建或渲染：

CountDown(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
./src/index.js
D:/ReactDev/CountDownReact/countdown/src/index.js:8

这是我的index.js 文件代码：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Bulma from 'bulma/css/bulma.css'
import App from './components/App/App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

以及我导入新组件的App.js：

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

class App extends Component {
    render() {
        return(
            <div className="App">
                Hello React
                <CountDown/>
            </div>
        );
    }
}

export default App;

最后，我的Countdown组件代码：

import React from 'react';

const CountDown = (props) => {
    <section class="section">
        <div className="hero-body">
            <div class="container">
                <h1 class="title">Section</h1>
                <h2 class="subtitle">
                 A simple container to divide your page into <strong>sections</strong>, like the one you're currently
                reading
                </h2>
            </div>
        </div>
    </section>
};
export default CountDown;

我还需要在这里导入我的新组件吗？我该如何解决这个问题。谢谢。

【问题讨论】：

这能回答你的问题吗？ Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null

标签： reactjs react-dom

【解决方案1】：

您的 Countdown 组件不返回任何内容，您可以将 {} 替换为 () 以使其返回。

import React from 'react';

const CountDown = (props) => (
    <section class="section">
        <div className="hero-body">
            <div class="container">
                <h1 class="title">Section</h1>
                <h2 class="subtitle">
                 A simple container to divide your page into <strong>sections</strong>, like the one you're currently
                reading
                </h2>
            </div>
        </div>
    </section>
);
export default CountDown;

应该可以的。

【讨论】：

【解决方案2】：

CountDown 组件不返回 JSX。您可以添加显式的 return 语句来返回 JSX。

【讨论】：

【解决方案3】：

遇到了同样的问题：

function Input(props) {
return 
<input type={props.type} placeholder={props.placeholder} />
 }

它必须是：

function Input(props) {
return <input type={props.type} placeholder={props.placeholder} />
 }

【讨论】：