Question

有没有办法重构代码以使其更干净？特别是renderTodos方法中的多次返回。我也有困惑，我正确地创建了renderTodos方法吗？我应该将它放在渲染功能中吗？或者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。

像这样：

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>
    )
}

或者更好地将其写为Stateless Functional Component：

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

查看此文章：Presentational and Container Components

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语句实际上是另一个函数（尽管你可以很容易地删除返回语句的必要性）。

请注意宇宙飞船运营商＆＃34; =＆gt;＆＃34;表示.map的参数是ES6 arrow function。

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

Answer 4

由于您没有州，因此您可以制作整个组件functional。

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

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

4 个答案: