Question

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

到目前为止，我所处的状态（包含要映射的数组）具有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

您需要为functionality prop提供一个函数而不是一个表达式，并纠正appLinks数组中functionality的错字。您的数组看起来像

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

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

1 个答案: