组件，ReactJS - 渲染没有返回任何内容[关闭]答案

【问题标题】：Components, ReactJS - Nothing was returned from render [closed]组件，ReactJS - 渲染没有返回任何内容[关闭]
【发布时间】：2021-07-03 04:49:30
【问题描述】：

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

错误： 错误：应用程序（...）：渲染没有返回任何内容。这通常意味着缺少 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;

索引.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"),);

【问题讨论】：

你为什么有<>？
in App.Jsx return 后面的括号必须在同一行。这是由 javascript 可选分号引起的。
是的，我只是重新创建了 app.jsx，我在下面发布了答案，现在可以使用了，谢谢 :)
谢谢，@Martin :)
复制：stackoverflow.com/questions/46741247/…

标签： javascript html css reactjs render

【解决方案1】：

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

问候.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;

【讨论】：

这不会解决问题；它必须是 return ( 在一行上。（另外，这是一个错字类型的问题，已经关闭）
它适用于我@ChrisG
请注意 .jsx 扩展，这会导致：codesandbox.io/s/competent-sea-kfln9?file=/src/App.jsx 另请参阅 Martin 的 this comment
@ChrisG 我明白你的意思了！例如谢谢！我已经更新了答案。我认为现在没有理由投反对票:)
是的，我删除了我的反对票 :) 不过，您的回答并没有解释导致问题的原因；相反，它表明它是由（不必要的）<>...</> 包装器引起的。该错误明确是单独一行中的return，对此问题的任何答案都应解决该问题。 SO主要是关于未来用户发现这一点，而不是帮助OP。编辑：当然，它也是重复的：stackoverflow.com/questions/46741247/…

【解决方案2】：

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

import React from 'react'

import Greetings from './Greetings'

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

export default App;

现在为我工作！！！

【讨论】：

你也可以写return()。
或return <Greetings />;