时间戳

首页 > 解决方案 > React hooks - 将 JSX 元素传递给父级

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

问题描述

我有一个简单的父/子场景，我希望孩子负责创建一些可重用的 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>;
   }
}

标签： reactjsreact-hooksuse-effectuse-state

解决方案

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

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

推荐阅读