React 钩子 - 将 JSX 元素传递给 parent

Question

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

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

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>;
   }
}

Answer 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>;
  }
}

React 钩子 - 将 JSX 元素传递给 parent

React hooks - pass JSX Element to parent

reactjs

react-hooks

use-effect

use-state