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

Question

我的应用程序包含两个组件：'Parent' 和 'Child'：

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 中，如下所示：

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
}

EDIT: I can use React.cloneElement to wrap the handler in eval inside the Child component This works but is untenable if content has nested components - I would have to recurse >through them and it gets messy.

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

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

React - eval'ing event handlers within child component's scope

javascript

reactjs

scope

eval

scoping