Question

我有一个组件（ListItem.js），其中显示了来自API请求的一些照片。在同一组件中，我有一个名为 showAlert 的函数，该函数还使用API请求中的一些数据并将其显示在警报对话框中。要调用showAlert函数，我使用以下行：

onClick={() => this.showAlert()}

这是整个组件（简化）：

import React, { Component } from "react";
import SweetAlert from "react-bootstrap-sweetalert";

class ListItem extends Component {
  state = {
    alert: null // initialising an empty alert
  };

  showAlert() {
    const getAlert = () => (
      <SweetAlert confirmBtnBsStyle="info" onConfirm={() => this.closeAlert()}>
        <img src={this.props.photo.urls.small} />
      </SweetAlert>
    );

    this.setState({
      alert: getAlert() // Fire up the dialog box
    });
  }

  closeAlert() {
    this.setState({
      alert: null // colse the dialog window
    });
  }

  render() {
    return (
      <>
        <div className="card__body">
          <img
            src={this.props.photo.urls.small}
            onClick={() => this.showAlert()}
          />
        </div>
        {this.state.alert}
      </>
    );
  }
}

export default ListItem;

我想删除showAlert函数并将其放在单独的组件中，以便可以在不同的组件中使用它。

为此，我创建了一个名为Alert.js的新组件，剪切了 showAlert 函数和状态，将它们放在Alert.js中并导出了它。

然后在ListItem.js中，我导入了Alert组件并替换了以下行：

{this.state.alert}

此行：

<Alert photoPath={this.props.photo.urls.small} />

但是我不知道的是，如何从ListItem.js（父组件）的Alert.js（子组件）中调用showAlert函数？

问题是：如何从父组件调用子组件内部的函数？

Answer 1

无法触发来自父级的函数调用。在这种情况下，您要做的就是将功能Alert作为对this组件的支持，并将{{1}}绑定到父组件，并在父组件中需要时触发它。

如何从ListIem组件中删除Alert功能？

1 个答案: