在jsx中呈现列表的多次返回

Question

Is there any way to refactor below code to make it more clean? Especially the multiple return in renderTodos method. I also have a confusion, am I creating the renderTodos method correctly? Should I place it in the render function? or doing this.renderTodos() is ok?

export default class TodoList extends Component {

    renderTodos = () => {
        const { todos } = this.props

        return todos.map(todo => {
            return (
                <Todo key={todo.id} {...todo} />
            )
        })
    }

    render() {
        return(
            <div>
                {this.renderTodos()}
            </div>
        )
    }
}

Answer 1

Since you just want to return the element without any condition or calculation, so you can avoid {} and return with map.

Like this:

renderTodos = () => {
    const { todos } = this.props;

    return todos.map(todo => <Todo key={todo.id} {...todo} /> )
}

With this way return inside renderTodos is required to return the result from that method.

Another way is put the map part directly inside render method, like this:

render() {
    return(
        <div>
            {
                this.props.todos.map(todo => <Todo key={todo.id} {...todo} /> )
            }
        </div>
    )
}

Or better to write it as Stateless Functional Component :

const TodoList = (props) => (
    <div>
        {
            props.todos.map(todo => <Todo key={todo.id} {...todo} /> )
        }
    </div>
)

Check this article: Presentational and Container Components

Answer 2

If you are not using renderTodos as a callback to be passed as a prop , you can render it directly in the final render() .

render() {
    return(
        <div>
            {props.todos.map(todo => <Todo key={todo.id} {...todo} />}
        </div>
    )
} 

I'm also using implicit return here.

Also, since your component doesn't maintain any state , and just accepts props and renders JSX, you can turn it into a stateless functional component -

const TodoList = props => {
      return(
          <div>
              {props.todos.map(todo => <Todo key={todo.id} {...todo} />}
          </div>
      )
}

Answer 3

This is a stateless component so you can just use a plain function instead of a class. Additionally, you don't actually have a multiple return in renderTodos since one of the return statements is actually another function entirely (though you can make it a one liner pretty easily removing the necessity for the return statement).

Note that the spaceship operator "=>" signifies that the parameter of .map is an ES6 arrow function .

function Todo(props) {
    return props.todos.map(todo => <Todo key={todo.id} {...todo} />);
}

Answer 4

Since you don't have state, you can make your entire component functional .

function TodoList(props) {
  return <div>{props.todos.map(todo => <Todo key={todo.id} {...todo} />)</div>;
}