Question

我有一个简单的父/子方案，我希望孩子负责创建一些可重用的JSX元素，这些元素将传递给父对象并由其呈现。我找不到一种不会导致烦人的代码重复，详尽的deps编译器警告或无限循环的方法。下面的示例将导致无限循环，因为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>;
   }
}

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元素传递给父对象

1 个答案: