您的渲染方法应该有返回语句 react/require-render-return答案

【问题标题】：Your render method should have return statement react/require-render-return您的渲染方法应该有返回语句 react/require-render-return
【发布时间】：2021-11-11 10:01:35
【问题描述】：

这是我的代码：

import React, { Component } from "react";
import Person from "./Person/Person";

class Persons extends Component {
  render() {
    this.props.persons.map((person, index) => {
      return (
        <div>
          <Person
            click={() => this.props.clicked(index)}
            name={person.name}
            age={person.age}
            key={person.id}
            changed={event => this.props.changed(event, person.id)}
          />
        </div>
      );
    });
  }
}

export default Persons;

【问题讨论】：

欢迎来到 Stackoverflow。请编辑您的问题以提供问题描述。这可能会防止模棱两可的答案或错误的答案。它还可以帮助与您有相同问题的人。如需指导，请阅读how to ask questions 和how to create a minimal example

标签： javascript reactjs

【解决方案1】：

在 React 组件中，您需要返回 JSX。如果这是一个功能性的，它就像这样：

function Component() {
    return <div>Some JSX</div>;
}

如果它是一个类组件，你的 render 方法应该返回一些 JSX。

class Component extends React.Component {
    render() { return <div>Some JSX</div>; }
}

您的代码只有一个返回值，这是给您的map。所以，把你的代码放在顶部return.

import React, { Component } from "react";
import Person from "./Person/Person";

class Persons extends Component {
  render() {
    return (
      <div>
        {this.props.persons.map((person, index) => {
          return (
            <div>
              <Person
                click={() => this.props.clicked(index)}
                name={person.name}
                age={person.age}
                key={person.id}
                changed={event => this.props.changed(event, person.id)}
              />
            </div>
          );
        })}
      </div>
    );
  }
}

export default Persons;

【讨论】：

不客气。正如@5th 在 cmets 中指出的那样，最好在你的问题中用几句话来解释你的问题，并使标题保持简洁:)

【解决方案2】：

class ProfileService extends Component {

constructor(props) {
    super(props);
    this.state = {

    };
}

 render(){        
   <div>
      fdgsdfgsdfg sdfgsdfg
   </div>        
 }
}

您应该在渲染方法中添加返回。

 render(){
        return(
            <div>
                fdgsdfgsdfg sdfgsdfg
            </div>
        )
    }

【讨论】：

【解决方案3】：

只需在渲染中返回您的 JSX（使用 React v16+）

....
    render () {
            **return** this.props.persons.map((person, index) => {
                return (
                    <div>...

将返回的元素数组包装在另一个元素中，例如 React v15 或更低版本的 div

【讨论】：