javascript - 如何将事件处理程序回调传递给子组件？

Question

我正在尝试使用 javascript 的 array.map 生成图标列表，其中一些是指向外部景点的链接，另一些则打开和关闭某些 bool 值。

到目前为止，包含我正在映射的数组的状态具有 js 对象，而这些对象又具有函数。

  constructor(props) {
    super(props);
    this.state = {
    appLinks: [
        {
          img: "../icons/twitter.svg",
          hoverState: "",
          funcionality: window.open("https://twitter.com/kaios?lang=en")
        },
        {
          img: "../icons/cart.svg",
          hoverState: "",
          funcionality: (this.toggleWindow)
        },
      ]

  render() {
    return (
          <AppBar
            appLinks={this.state.appLinks}
            update={this.updateAppBar.bind(this)}
          />
    );
  }

这是我的父类，包含我想要创建的链接数组。

const appBar = props => {
  return (
    <div className="appBar" onMouseLeave={() => props.update(20)}>
      {props.appLinks.map((appLink, index) => {
        return (
          <div
            key={index}
            className={"app_icon " + appLink.hoverState}
            onClick={appLink.functionality}
            onMouseOver={() => props.update(index)}
          >
            <img src={appLink.img} />
          </div>
        );
      })}
    </div>
  );
};

这是我的演示课。

我希望数组中的多个链接组件打开外部链接，并且希望其他 div 触发父函数中的函数。

任何帮助将不胜感激!谢谢!

Answer 1

您需要为您的功能属性提供一个函数而不是表达式，并更正appLinks数组中功能的拼写错误。你的数组看起来像

appLinks: [
        {
          img: "../icons/twitter.svg",
          hoverState: "",
          functionality: () => window.open("https://twitter.com/kaios?lang=en")
        },
        {
          img: "../icons/cart.svg",
          hoverState: "",
          functionality: this.toggleWindow
        },
      ]