javascript - React - 如何将值传递给组件中的过滤函数？

Question

我正在尝试构建一个简单的待办事项应用程序。

我将所有任务存储在一个数组中，如下所示:

var TASKS = [
  {
    name: "Pay Bills",
    completed: false,
    id: 1,
  },
  {
    name: "Go shopping",
    completed: false,
    id: 2,
  },
  {
    name: "Pick up something",
    completed: false,
    id: 3,
  },
  {
    name: "Drink Coffee",
    completed: true,
    id: 4,
  },
];

我想通过将 bool 值作为属性传递给列表组件来将它们列出在单独的部分(todo/done)中。

我的组件结构在这里:

var Application = React.createClass({
  propTypes: {
    title: React.PropTypes.string,
  },

  getDefaultProps: function() {
    return {
      title: "Add item",
    }
  },

  onTodoAdd: function(name) {
      ...
  },

  onRemoveTask: function(index) {
      ...
  },

  onCompletedTask: function(index) {
      ...
  },

  render: function() {
    return (
      <div className="to-do">

        <Section title={this.props.title}>
          <AddTodoForm onAdd={this.onTodoAdd} />
        </Section>

        <Section title="to-do">
          <ListTasks initialTasks={TASKS} completedTasks={false} />
        </Section>

        <Section title="done">
          <ListTasks initialTasks={TASKS} completedTasks={true} />
        </Section>
      </div>
    );
  }
});

列表组件如下所示:

var ListTasks = React.createClass({
  propTypes: {
    initialTasks: React.PropTypes.array.isRequired,
    completedTasks: React.PropTypes.bool.isRequired,
  },

  getInitialState: function() {
    return {
      tasks: this.props.initialTasks,
    };
  },

  render: function() {
    return (
      <div>
        {this.state.tasks
        .filter(function(task, index, props) {
          return task.completed === props.completedTasks;
        })
        .map(function(task, index) {
          return(
            <Task
              name={task.name}
              key={task.id}
              completed={task.completed}
              onCompleted={function() {this.onCompletedTask(index)}.bind(this)}
              onRemove={function() {this.onRemoveTask(index)}.bind(this)}
            />
          );
        }.bind(this))}
      </div>
    );
  }
});

但是我不能通过

completedTasks={true/false}

到过滤器函数

props.completedTasks

请问有谁可以帮忙吗？

非常感谢。

Answer 1

问题出在渲染方法中的 ListTasks 组件内。

Array.filter的第三个参数method 不是组件 props ，是一个数组(调用了数组过滤器)。

要解决此问题，您可以定义一个新变量(props)，并且可以通过 lexical scoping 在内部函数中访问它。

 render: function() {
    var props = this.props;
    return (
      <div>
        {this.state.tasks
        .filter(function(task, index) {
          return task.completed === props.completedTasks;
        })
        .map(function(task, index) {
          return(
            <Task
              name={task.name}
              key={task.id}
              completed={task.completed}
              onCompleted={function() {this.onCompletedTask(index)}.bind(this)}
              onRemove={function() {this.onRemoveTask(index)}.bind(this)}
            />
          );
        }.bind(this))}
      </div>
    );
  }