react js中的组件不渲染答案

【问题标题】：component in react js not renderingreact js中的组件不渲染
【发布时间】：2018-06-22 03:37:37
【问题描述】：

我在 React 中有一个组件，我在 index.js 中导入它，但它给出了这个错误：没有从渲染返回。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null

import React, { Component } from 'react';
import './App.css';

const Intro = (props) => {
  <p className="App-intro">
    To get started, edit <code>src/App.js</code> and save to reload
  </p>
}
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">

          <h1 className="App-title">TV Series list</h1>
        </header>
        <Intro />
      </div>
    );
  }
}

export default App;

【问题讨论】：

标签： reactjs

【解决方案1】：

您的代码：

const Intro = (props) => {
  <p className="App-intro">
    To get started, edit <code>src/App.js</code> and save to reload
  </p>
}

没有返回语句。

如果你将它包裹在括号{} 中，那么你需要在组件中有一个return 语句。如果它包含在括号中，则不必这样做，因为语法意味着返回

另外，你没有导出Intro

【讨论】：

是的，这是 :)
const Intro = (props) => (
开始，编辑 src/App.js 并保存以重新加载
);虽然有效
在同一个文件中使用时不必这样做，只要您想从外部访问它即可
是的，如果您使用该语法，则返回值隐含在箭头函数中。但是，您不能使用该方法执行任何逻辑，只能执行返回中的内容。
这是有道理的，如果他在 {} 中执行它，那是完全不同的语法，我认为这会导致错误，是吗？服务器会期望其中有一个 return 语句，而如果它只是 () 则返回已经隐含

【解决方案2】：

const Intro = (props) => (
  <p className="App-intro">
    To get started, edit <code>src/App.js</code> and save to reload
  </p>
)

或

const Intro = (props) => {
  return (<p className="App-intro">
    To get started, edit <code>src/App.js</code> and save to reload
  </p>);
}

在您的代码中，您在箭头函数主体中使用了{}，但它不返回任何内容，因此没有元素/组件正在呈现。您可以使用上述任何方法从箭头函数返回值。这里() 假设body 中唯一的语句是return 语句，而{} 需要明确的return 语句。

您的错误陈述可能是因为Intro 是一个无状态组件。

【讨论】：

【解决方案3】：

如果您的文件如您所说的那样称为index.js，则可能是错误。

您的代码中有 jsx，因此您的文件必须命名为： index.jsx

【讨论】：