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

Question

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

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 并在父组件的范围内进行评估（如果单击按钮，您可以看到它记录“父”，这是父组件内t 的值） . 但是，我需要将 t 的范围限定在 Child 的范围内（以便在单击按钮时记录“Child”）。有没有办法做到这一点？

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

---

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

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

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

Answer 1

您能否将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 将处理程序包装在子组件内的 eval 中 这可行，但如果内容具有嵌套组件，则站不住脚 - 我将不得不递归 > 通过它们，它会变得混乱。

它也不应该引起递归问题，因为您将传递给该函数的变量t 将在该函数的范围内，因此在那里创建的所有组件都应该看到它（就像现在发生在您的@ 987654328@ 组件，可以看到来自Parent 范围的变量。）