javascript - 您的渲染方法应具有return语句react/require-render-return

这是我的代码:

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;

最佳答案

在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;