如何在 useEffect 中将 JS 脚本与功能组件绑定

Posted 2023-03-17

【中文标题】如何在 useEffect 中将 JS 脚本与功能组件绑定

【英文标题】：How to bind JS script inside a useEffect with function component

【发布时间】：2022-01-20 02:55:49

【问题描述】：

我有一个 useEffect 钩子，其中包含一个 if-else 块和一个 else 内的“B1.X.Change”JS 函数。 现在我无法将“B1.X.Change”绑定到函数组件“func1”内的元素“changeM”。非常感谢任何有关如何实现这一目标的帮助。

我的代码如下所示。

useEffect(() => 
  if (var1 === "") 
    let id = "newvar1";
    if (id === "") 
      if (condition) 
        setP(true);
       else 
        setP(false);
      
     else 
      setvar1(id);
      setP(true);
    
   else 
    if (var2 === "xxx" && var3 == null) 
      api
        .getC(var1)
        .then((details) => 
          setvar3(details);
        )
        .catch((reason) => 
          console.log(reason);
        );
    
    if (condition) 
      //some js script
      B1.X.Change("#changeM", 
        // <do something>
      );
      //some js script
      B1.X.Change("#changeN", 
        // <do something>
      );
      setC(true);
    
  
, [var2, var3]);

function func1() 
  return (
    <Col className="col-4 mt-2 mr-4">
      <Link to="/co" id="changeM">
        "changeM"
      </Link>
      <Link to="/co" id="changeN">
        "changeN"
      </Link>
    </Col>
  );

【参考方案1】：

你的意思是使用函数原型方法bind吗？

如果是这样，这里就回答了

How to bind parameters in React hooks' setState() function?

旁注，尚不清楚changeM 是否是您的代码示例中的一个元素。

您为什么要尝试将B1.X.Change 绑定到changeM？

如果您在单击 changeM 和 changeN 时尝试运行某些代码，则使用事件侦听器。在 React 中，您可以使用 onClick 属性。在 onClick 属性中，您添加了一个函数，当用户单击该元素时将调用该函数。

function func1() 
  const someFunc = (kind) => 
    // your logic here. The argument allows you to tell if changeM or changeN was clicked.
  
  return (
    <Col className="col-4 mt-2 mr-4">
      <Link to="/co" id="changeM" onClick=() => someFunc("changeM")>
        "changeM"
      </Link>
      <Link to="/co" id="changeN" onClick=() => someFunc("changeN")>
        "changeN"
      </Link>
    </Col>
   )

【讨论】：

B1.X.Change 包含一个用于小部件的 javascript，该小部件应在单击 changeM 和 changeN 时打开

我已经编辑了我的答案，以展示如何通过在 bind 内部使用 React 的 onClick 处理程序来完成您需要的工作，这在 React 的功能组件中是不可能的。