Javascript 在单个prop React.js中传递多个方法

我有一个react.js组件，我想将一系列不同的方法从父组件传递给子组件，这些方法修改父组件的状态

class Page extends Component {
  constructor(props) {
    super(props);

    this.state = {
      items: this.props.items,
      currentItemID: 1
    };

    this.actions = this.actions.bind(this);
  }

  render() {
    return (
      <div className="page">
        {
          this.state.items.map(item =>
            <Item key={item._id} item={item} actions={this.actions} />
          )
        }
      </div>
    );
  }

  actions() {
    return {
      insertItem: function (itemID) {
        const currentItems = this.state.items;
        const itemPosition = this.state.items.map((item) => item._id).indexOf(itemID);

        const blankItem = {
          _id: (new Date().getTime()),
          content: ''
        };

        currentItems.splice(itemPosition + 1, 0, blankItem)

        this.setState({
          items: currentItems,
          lastAddedItemID: blankItem._id
        });
      },
      setCurrentItem: function (itemID) {
        this.setState({ currentItemID: itemID });
      },
      focus: function(itemID) {
        return (itemID === this.state.currentItemID);
      }
    }
  }

然而，我得到了错误

未捕获的TypeError:无法读取未定义的属性“currentItemID”

---

在焦点方法的定义中，在actions方法中。有人能告诉我为什么会出现错误，或者有其他方法将多个操作传递给子组件吗？

上下文没有传递给函数，那么函数中的“this”是函数本身的，而不是组件的。。您可以通过这种方式解决它（将函数放入组件中）：

但是，推荐的方法是将函数放入上述组件中，然后删除actions方法并执行以下操作：

<Item key={item._id} item={item} actions={{
            insertItem: this.insertItem.bind(this),
            setCurrentItem: this.setCurrentItem.bind(this),
            focus: this.focus.bind(this)
        }} />

或

this.insertItem（），
setCurrentItem:（）=>this.setCurrentItem（），
焦点：（）=>this.focus（）
}} />

上下文没有传递给函数，那么函数中的“this”是函数本身的，而不是组件的。。您可以通过这种方式解决它（将函数放入组件中）：

但是，推荐的方法是将函数放入上述组件中，然后删除actions方法并执行以下操作：

<Item key={item._id} item={item} actions={{
            insertItem: this.insertItem.bind(this),
            setCurrentItem: this.setCurrentItem.bind(this),
            focus: this.focus.bind(this)
        }} />

或

this.insertItem（），
setCurrentItem:（）=>this.setCurrentItem（），
焦点：（）=>this.focus（）
}} />

我认为，您的主要错误是调用方法内部的操作，它会产生一些意外问题，尝试将对象传递给子对象，而不是函数，如果您在每个函数内部使用es5-bind

此

（主要错误）你能给我一个如何将其中一个函数绑定到“this”的例子吗？bind（this）-就像下面的答案一样，你的主要错误是-你在方法内部调用了你的操作-它会产生一些意想不到的问题，试图将对象传递给子对象，而不是函数，如果您在每个函数中使用es5-bind

this

（这是主要错误），请给我一个如何将其中一个函数绑定到“this”的示例。bind（这）-就像下面的答案一样，实际上，item组件是递归的，其中包含其他嵌套项，那么，如何将不同的方法传递给item组件中的嵌套项？这让我困惑了一段时间。@child组件中的_archer，当你想调用嵌套的child one（child的child）传递这样的动作时：或者你甚至可以像这样传递每件事（道具中的动作和其他东西）：实际上，item组件是递归的，它里面有其他嵌套的项，那么，如何将不同的方法传递给item组件中的嵌套项？这让我困惑了一段时间。@child组件中的_弓箭手，当你想调用嵌套的child one（child的child）传递这样的动作时：或者你甚至可以像这样传递每件事情（动作和道具中的其他东西）：

<Item key={item._id} item={item} actions={{
            insertItem: this.insertItem.bind(this),
            setCurrentItem: this.setCurrentItem.bind(this),
            focus: this.focus.bind(this)
        }} />

<Item key={item._id} item={item} actions={{
            insertItem: () => this.insertItem(),
            setCurrentItem: () => this.setCurrentItem(),
            focus: () => this.focus()
        }} />