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

Question

我有一个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);
      }
    }
  }

在我的子组件中，我试图在componentDidMount lifecyle方法中使用focus方法，如下所示：

 componentDidMount() {
    if (this.props.actions().focus(this.props.item._id)) {
      this.nameInput.focus();
    }
  }

但是，我得到了错误

未捕获的TypeError：无法读取未定义的属性'currentItemID'

在焦点方法的定义中，在动作方法中。 谁能为我指出错误的正确方向，或者是将多个操作传递给子组件的另一种方法？

Answer 1

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

      actions() {
         return {
            insertItem: this.insertItem.bind(this),
            setCurrentItem: this.setCurrentItem.bind(this),
            focus: this.focus.bind(this),
         }
      }
      insertItem(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(itemID) {
        this.setState({ currentItemID: itemID });
      },
      focus(itemID) {
        return (itemID === this.state.currentItemID);
      }

但是，建议的方法是将功能放入上述组件中，并删除actions方法并执行以下操作：

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