匹配对象内函数的最佳方法 - React Native答案

【问题标题】：Best way to match function inside an Object - React Native匹配对象内函数的最佳方法 - React Native
【发布时间】：2020-11-29 22:11:57
【问题描述】：

我想要的是点击栏时调用openMenu函数，点击关闭图标时调用closeMenu函数。

我注意到 icon.callFunc == openMenu 总是错误的。 Logs

这是整个组件的来源。

const MenuBar = () => {

    const onPressHandler = () => {

        setIcon({
            icon: icon.icon === 'bars'? "window-close" : 'bars',
            callFunc: icon.callFunc == openMenu ? closeMenu : openMenu
        });
        console.log(icon.callFunc);
        icon.callFunc()

    }

    const closeMenu = () => {
        console.log("Closed");
    }

    const openMenu = () => {
        console.log("Opened");
    }


    const [icon, setIcon] = useState({
        icon: "bars",
        callFunc: openMenu
    })


    return (
        <TouchableOpacity
            onPress={onPressHandler}>
            
            <Icon
                name={icon.icon}
                size={25}
                color="white"
                solid
                style={{ paddingLeft: 14, padding: 20 }} />

        </TouchableOpacity>
    );
}

有什么建议吗？

【问题讨论】：

我猜你应该使用icon.callFunc === openMenu，而不是icon.callFunc == openMenu。如果你的类型不同，== 会失败
也试过了，还是不行！

标签： reactjs react-native jsx

【解决方案1】：

根据@Tarukami 的建议，您可能应该使用状态来管理您的菜单是否显示。

如果你真的想使用这个路由，你可以尝试检查函数名而不是它的引用，这可能会有所不同。

  const onPressHandler = () => {
    setIcon({
      icon: icon.icon === "bars" ? "window-close" : "bars",
      callFunc: icon.callFunc.name === "openMenu" ? closeMenu : openMenu
    });
    console.log(icon.callFunc);
    icon.callFunc();
  };

我建议然后在“componentDidMount”useEffect 中初始化您的图标。

  useEffect(() => {
    setIcon({
      icon: "bars",
      callFunc: openMenu
    });
  }, []);

完整代码如下

import React, { useState, useEffect } from "react";

const App = (props) => {
  const closeMenu = () => {
    console.log("Closed");
  };

  const openMenu = () => {
    console.log("Opened");
  };

  const [icon, setIcon] = useState({});

  useEffect(() => {
    setIcon({
      icon: "bars",
      callFunc: openMenu
    });
  }, []);

  const onPressHandler = () => {
    setIcon({
      icon: icon.icon === "bars" ? "window-close" : "bars",
      callFunc: icon.callFunc.name === "openMenu" ? closeMenu : openMenu
    });
    console.log(icon.callFunc);
    icon.callFunc();
  };

  return <div onClick={onPressHandler}>fokoff</div>;
};

export default App;

CodeSandbox，请注意控制台中的“打开”和“关闭”切换。

同样重要的是要注意 setIcon 方法是异步的，所以即使你将 icon.callFunc 设置为 openMenu，因为它是 "closeMenu"，"closeMenu" 仍然会在 icon.callFunc() 处被触发，并且openMenu 将在下一次调用 onPressHandler 时触发。

【讨论】：

icon.callFunc.name === "openMenu" ? closeMenu : openMenu 这对我有用！谢谢

【解决方案2】：

您似乎正试图使事情变得比实际复杂得多。看看这个显示和隐藏菜单组件的简单模板：

const Menu = () => {
  return <h3>Hi I am the menu</h3>
}
const App = () => {
  const [isMenuVisible, setIsMenuVisible] = useState(false)
  function handleClick() {
    setIsMenuVisible(!isMenuVisible)
  }
  
  return (
    <>
      <button onClick={handleClick} >{isMenuVisible ? "Hide menu" : "Show menu"}</button>
      {isMenuVisible && <Menu />}
    </>
    )
}

我很确定它在您的应用程序中更易于阅读和使用。

【讨论】：

这真的很简单！一定要试试