代码之家  ›  专栏  ›  技术社区  ›  Andromeda

Reactjs:没有从Render返回任何内容

  •  0
  • Andromeda  · 技术社区  · 7 年前

    我已经用 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;
    

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

    2 回复  |  直到 7 年前
        1
  •  5
  •   OliverRadini    7 年前

    你的倒计时组件不返回任何内容,你可以替换 {} 具有 () 为了让它回来。

    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
  •  2
  •   Nithin Thampi    7 年前

    倒计时组件不返回JSX。您可以添加一个显式的返回语句来返回JSX。