javascript - react .js。创建带有参数的方法(props 将是参数)还是在函数体中引用 props 更好？

Question

考虑以下示例:

import React, { Component } from 'react';

class Todos extends Component {

  renderList = (listArray) => { // our todos are function argument
    return listArray.map(listItem => (
      <li>listItem</li>
    ))
  };

  render() {
    const { todos } = this.props;
    return (
      <div className="container">
        renderList(todos);
      </div>
    ); 
  }
}

export default Todos;

第二个例子:

import React, { Component } from 'react';

class Todos extends Component {

  renderList = () => { // but in this example we are explicitly reference to this.props 
    const { todos } = this.props;
    return todos.map(listItem => (
      <li>listItem</li>
    ))
  };

  render() {
    return (
      <div className="container">
        renderList();
      </div>
    ); 
  }
}

export default Todos;

我永远无法决定哪种风格更好。我试着在网上搜索它，但这似乎是一个罕见的困境。所以我的问题是 - 创建带有参数的方法(props 将是参数)还是在函数体中引用 props 更好？有什么真正的区别吗？您的偏好是什么？

Answer 1

作为一般规则，我总是倾向于将所需的参数传递给我的方法，而不是使用类作用域，主要是因为可测试性。
假设你想稍后测试这个方法，你可以只传递你想要的参数，这样更容易和更清晰，而不是必须为你的类设置正确的变量(或者你的方法定义的范围是什么) .

那是回答你的问题，但在你上面写的例子中我也会考虑创建一个子组件来封装你的列表项。

希望这对您有所帮助!