React hooks - 将 JSX 元素传递给父级答案

【问题标题】：React hooks - pass JSX Element to parentReact hooks - 将 JSX 元素传递给父级
【发布时间】：2020-10-17 06:22:00
【问题描述】：

我有一个简单的父/子场景，我希望孩子负责创建一些可重用的 JSX 元素，这些元素传递给父级并由父级渲染。我找不到一种不会导致烦人的代码重复、详尽的编译器警告或无限循环的方法。下面的示例会导致无限循环，因为 JSX 元素 reusableButton 位于依赖数组中，显然每次设置都会改变。

目前我可能会求助于绝对定位，但肯定有更好的方法来实现这一点吗？

function Parent() {
   const [actions, setActions] = React.useState();

   return <>
      <div>{actions}</div>
      ...separation of concerns...
      <Child setActions={setActions} />
   </>
}

function Child(props) {
   const { setActions } = props;

   const reusableButton = <Button>I am reusable</Button>;

   React.useEffect(() => {
      setActions(reusableButton);
   }, [setActions, reusableButton]);

   if (...some condition...) {
      return <div>{reusableButton}</div>;
   } else {
      return <div>don't repeat yourself</div>;
   }
}

【问题讨论】：

reusableButton 在您的示例中正在每次渲染上重新创建，这会导致效果触发，从而导致无限循环。你可以记住它，把它移到功能组件范围之外，这样它就只创建一次，或者你可以重新考虑你的设计。你需要什么？一个可重用的组件，但其外观取决于条件？这只是一个普通的组件！
为什么reusableButton 不能只是一个单独的组件？然后你可以在Parent 和Child 中调用它。
@ericgio 就是这样。

标签： reactjs react-hooks use-effect use-state

【解决方案1】：

根据您的描述和代码示例，您应该只制作一个组件：

function ReusableButton() {
  return <Button>I am reusable</Button>;
}

function Parent() {
  return (
    <>
      <div><ReusableButton /></div>
      ...separation of concerns...
      <Child />
    </>
  );
}

function Child(props) {
  if (...some condition...) {
    return <div><ReusableButton /></div>;
  } else {
    return <div>don't repeat yourself</div>;
  }
}

【讨论】：

根据我的描述这是正确的答案。不幸的是，为了简洁起见，我遗漏了一些细节，这意味着这实际上并不能解决我的具体问题。我最终用一组useCallbacks 和useMemos 解决了这个问题，我所做的每一件事似乎都越来越需要它们。
所以它不仅仅是一个共享元素，也是一个共享行为（回调）。所以我使用useCallback 来记忆回调和useMemo 来记忆按钮，以便两者都可以在useEffect 中引用