Reactjs:渲染没有返回任何内容
Reactjs: Nothing Was Returned From Render
我已经使用 create-react-app
设置了一个基本的 React 应用程序并创建了我的第一个组件。但是,由于浏览器中出现此错误,项目无法构建或呈现 window:
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;
我还需要在这里导入我的新组件吗?我该如何解决这个问题。谢谢。
您的倒计时组件 return 没有任何内容,您可以将 {}
替换为 ()
以便获得 return.
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;
应该可以了。
CountDown 组件没有 return JSX。您可以为 returning JSX 添加显式 return 语句。
遇到同样的问题:
function Input(props) {
return
<input type={props.type} placeholder={props.placeholder} />
}
相反,它必须是:
function Input(props) {
return <input type={props.type} placeholder={props.placeholder} />
}
我已经使用 create-react-app
设置了一个基本的 React 应用程序并创建了我的第一个组件。但是,由于浏览器中出现此错误,项目无法构建或呈现 window:
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;
我还需要在这里导入我的新组件吗?我该如何解决这个问题。谢谢。
您的倒计时组件 return 没有任何内容,您可以将 {}
替换为 ()
以便获得 return.
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;
应该可以了。
CountDown 组件没有 return JSX。您可以为 returning JSX 添加显式 return 语句。
遇到同样的问题:
function Input(props) { return <input type={props.type} placeholder={props.placeholder} /> }
相反,它必须是:
function Input(props) { return <input type={props.type} placeholder={props.placeholder} /> }