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