React - 在子组件范围内评估事件处理程序

问题描述

我的应用程序包含两个组件：“父”和“子”：

import React from "react";
import ReactDOM from "react-dom";

function Parent() {
  const t = "Parent";
  return (
    <div className="Parent">
      <Child
        content={
          <button type="button" onClick={() => eval("console.log(t);")}>
            Show t
          </button>
        }
      />
    </div>
  );
}

function Child(props) {
  const t = "Child";
  return props.content;
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <Parent />
  </React.StrictMode>,rootElement
);

Link to Sandbox

Parent 将一些内容传递给 Child 并且 Child 呈现它。在我的示例中，内容是一个按钮。这个按钮有一个 onClick 处理程序，当它被点击时会打印一些变量 t 的值。由于我无法控制的原因，处理程序使用 eval 并在 Parent 组件的范围内进行评估（如果您单击该按钮，您可以看到它记录了“Parent”，即 t 的值在父组件）。 但是，我需要将 t 范围限定在 Child 的范围内（以便在单击按钮时记录“Child”）。有没有办法做到这一点？

我对 JS 范围规则不是很清楚，但据我了解，eval 在直接调用时具有局部范围。但是我事先并不知道 Child 的内容，所以我不能在 Child 本身内部调用它。此外，我无法避免完全使用 eval，因为处理程序将始终作为字符串传递给组件。

---

编辑：我可以使用 React.cloneElement 将处理程序包装在 eval 中的 Child 组件中，如下所示：

function Child(props) {
  const t = "Child";
  return React.cloneElement(props.content,{onClick: eval(props.content.props.onClick)});
}

这可行，但如果内容具有嵌套组件，则此方法站不住脚 - 我将不得不通过它们进行递归，并且会变得混乱。

解决方法

是否可以将 content 设为变量 t 的函数，然后在要关联该变量的作用域的组件内调用它？
我的意思是类似下面的代码：

function Parent() {
  const t = "Parent";
  return (
    <div className="Parent">
      <Child
        content={(
           t // <-------------------- note that it is a function now
        ) => (
          <button type="button" onClick={() => eval("console.log(t);")}>
            Show t
          </button>
        )}
      />
    </div>
  );
}

function Child(props) {
  const t = "Child";
  return props.content(t); // <--------------------- calling it here,so it see t from child component
}

编辑：我可以使用 React.cloneElement 将处理程序包装在 Child 组件内的 eval 中 这有效，但如果内容具有嵌套组件则站不住脚 - 我将不得不 >通过它们递归并且变得混乱。

它也不应该导致递归问题，因为变量 t，您将传递给该函数将在该函数的范围内，因此在那里创建的所有组件都应该看到它（就像现在发生的那样您的 Child 组件，它查看 Parent 范围内的变量。）