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

时间:2018-09-20 15:22:29

标签: javascript reactjs

这是我的代码:

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;

3 个答案:

答案 0 :(得分: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;

答案 1 :(得分:0)

仅在渲染中返回您的JSX(使用React v16 +)

max()

将您返回的元素数组映射到其他元素中,例如React v15或更低版本的div

答案 2 :(得分:0)

class ProfileService extends Component {

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

    };
}

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

您应该在render方法中添加返回值。

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