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

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

到目前为止，包含我映射的数组的state有js对象，而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)}
          />
    );
  }

构造函数（道具）{
超级（道具）；
此.state={
应用链接：[
{
img:“../icons/twitter.svg”，
悬停状态：“，
功能性：window.open（“https://twitter.com/kaios?lang=en")
},
{
img:“../icons/cart.svg”，
悬停状态：“，
功能性：（this.toggleWindow）
},
]
render（）{
返回(
);
}

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

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>
  );
};

const-appBar=props=>{
返回(
道具更新（20）}>
{props.appLinks.map（（appLink，index）=>{
返回(
props.update（索引）}
>
);
})}
);
};

这是我的演讲课

我希望数组中的几个链接组件打开一个外部链接，我希望其他div触发父函数中的一个函数

任何帮助都将不胜感激！

---

谢谢

您需要为

功能属性

提供一个函数而不是表达式，并更正appLinks数组中

功能

的打字错误。你的数组看起来像

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

---

您需要为

功能属性

提供函数而不是表达式，并更正appLinks数组中

功能

的键入错误。你的数组看起来像

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

---

你快到了。

functionality

prop应该看起来像

functionality:（）=>{…stuff}

您可以指定错误或问题吗？您就快到了。

functionality

属性应该类似于

functionality:（）=>{…stuff}

您可以指定错误或问题吗？