渲染未返回任何内容。这通常意味着缺少返回语句。或者，要不呈现任何内容，请返回 null [已关闭]

javascript reactjs

2022-08-30 05:15:39

我在 React 中有一个组件，我正在 index.js 中导入该组件，但它给出了此错误：

渲染未返回任何内容。这通常意味着缺少返回语句。或者，要不呈现任何内容，请返回 null

索引.js：

import React from 'react';
import ReactDOM from 'react-dom'; 
import  Search_Bar from './components/search_bar';

const   API_KEY = 'AIzaSyCnpDObOLiiqN87YKJKZ-cxzdAsvYD1F-U';

const App = () => {
    return
    (
        <div>
            <Search_Bar />
         </div>
    );
}

ReactDOM.render(<App />, document.querySelector('#root'));

元件：

import React from 'react';

const Search_Bar = () =>
{
    return <input />;
};

export default Search_Bar;

答案 1

我在 render（）方法中遇到了同样的问题。当您从 render（） 返回时，问题就来了：

render() {
    return 
    (
        <div>Here comes JSX !</div>
    );
}

即，如果您在新行中开始括号

尝试使用：

render() {
    return (
        <div>Here comes JSX !</div>
    );
}

这将解决错误

答案 2

假设您将无状态组件用作箭头函数，则内容需要放在括号“（）”而不是括号“{}”中，并且您必须删除返回函数。

const Search_Bar= () => (
    <input />; 
);