Question

我有一对功能组件，并希望将其中一个作为参数传递给另一个，如下所示：

const compA = () => ( <div> Hello World! </div>);

const compB = (AnotherComp) => ( <AnotherComp />);

compB(compA);

上面的代码片段是我所追求的精简版本，因为每个组件都有自己的React钩子集。

Google-fu提出了许多有关高阶组件的指南，但是大多数指南都解决了HOC和react钩子之间的区别，或者解决了将道具从类组件转换成功能子组件的问题。

有没有办法使用如上所示的高阶 functional 组件？

Answer 1

我希望我没有误解您的问题，但在我看来，要被视为更高阶的东西，您需要一个函数来返回一个函数，如下面的 makeBlue 所示。

const Button = ({ children, ...props }) => (
  <button {...props}>{children}</button>
);

const makeBlue = (Component) => (props) =>
  <Component style={{ background: "blue" }} {...props} />;

const BlueButton = makeBlue(Button);

是的，它们与功能组件一起工作。

传递功能组件作为参数，然后在JSX中使用它

1 个答案: