Question

我正在尝试创建一个组件并在 App.jsx（另一个组件）中调用它并在渲染中调用这个 App.jsx，但它给了我这个错误。

错误： 错误：App(...)：渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null。

这是我完成的代码。

组件：（Greetings.Jsx）

import React from 'react'
function Greetings()
{
    let timehours=new Date()
    timehours=timehours.getHours();
    let cssStyle={
        color:'Green',
        
      }
      
      let text="";
      if(timehours>=1&&timehours<=12)
      {
       
        // z.src = window.location.origin + '/images/morning.jpeg'; 
        // document.body.backgroundImage= z.src;
        text="Good Morning";
        cssStyle.color='Green';
        // bgimg.Image=window.location.origin + '/images/morning.jpg';
        
        
      }
      else if(timehours>=12&&timehours<19)
      {
        
        // bgimg.Image=window.location.origin + '/images/morning.jpg';
        text="Good Afternoon";
        cssStyle.color='Orange';
      }
      else
      {
        text="Good Night";
        cssStyle.color='Black';
      }

      return(
        <>
            <div>
                <h1>   Hello Sir, <span style={cssStyle}>{text}</span></h1>
            </div>  
        </>
      );
}
export default Greetings;

App.Jsx


import React from 'react';
import Greetings from './Greetings'

function App()
{
    return 
    (
        <>
            <Greetings/>
        </>
        );
}

export default App;

Index.jsx

import React from 'react';
import reactDom from 'react-dom';
import ReactDOM from 'react-dom';
import "./index.css";
import App from "./App";


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

Answer 1

我刚刚重新创建了 App.jsx 文件

import React from 'react'

import Greetings from './Greetings'

function App()
{
    return(<Greetings></Greetings>);
}

export default App;

现在为我工作！！！

Answer 2

不需要空括号，App.Jsx 中的 return 后面的括号必须在同一行（特别感谢 @Martin）：

Greeting.jsx：

import React from 'react'

function Greetings()
{
    // the other code is omitted for the brevity    
    return(            
        <div>
            <h1>   Hello Sir, <span style={cssStyle}>{text}</span></h1>
        </div> 
    );
}
export default Greetings;

和：

import React from 'react';
import Greetings from './Greetings'

function App()
{
    return <Greetings/>;
}

export default App;

组件，ReactJS - 渲染没有返回任何内容

2 个答案: