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

Question

有什么方法可以重构下面的代码以使其更干净？ 特别是renderTodos方法中的多次返回。 我也有一个困惑，我是否正确创建了renderTodos方法？ 我应该将其放置在render函数中吗？ 或这样做this.renderTodos()可以吗？

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

由于您只想返回没有任何条件或计算的元素，因此可以避免{}并return map。

像这样：

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

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

通过这种方法，需要在renderTodos内部返回，以从该方法返回结果。

另一种方法是将地图部件直接放在render方法内，如下所示：

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

或者最好将其编写为无状态功能组件 ：

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

检查本文： 演示和容器组件

Answer 2

如果您没有使用renderTodos作为要作为prop传递的回调，则可以直接在最终的render()渲染它。

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

我也在这里使用隐式返回。

另外，由于您的组件不维护任何state ，仅接受props并呈现JSX，因此您可以将其变成无状态的功能组件-

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

Answer 3

这是一个无状态组件，因此您可以只使用普通函数而不是类。 另外，在renderTodos中实际上没有多重返回，因为其中一个return语句实际上完全是另一个函数（尽管您可以使其成为一个线性函数，从而很容易地消除了return语句的必要性）。

请注意，太空飞船运算符“ =>”表示.map的参数是ES6箭头函数 。

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

Answer 4

由于您没有状态，因此可以使整个组件正常运行 。

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