将 prop 渲染为组件，以防止 hooks 的顺序发生变化答案

【问题标题】：Render prop as a component to prevent change in the order of hooks将 prop 渲染为组件，以防止 hooks 的顺序发生变化
【发布时间】：2022-01-12 07:02:22
【问题描述】：

我将每个路由页面包装在顶级组件中，但传入的 page 是一个函数（因为我无法按原样导出组件）所以，为了呈现它们，我必须像这样直接调用它们的函数所以：

const RoutePageContainer = ({ title, page }) => {
  return (
    <div className={styles.container}>
      {title && <h3 className={styles.title}>{title}</h3>}
      <div className={styles.page}>{page()}</div>
    </div>
  );
};

这一直有效，但现在我收到Warning: React has detected a change in the order of Hooks 错误，我认为这是由这里的函数调用引起的，所以我正在尝试修复它。

Kent C. Dodds's blog post 描述了问题以及如何解决它，但我不确定如何将此页面道具呈现为 JSX 元素，因为它是动态的。将它作为儿童道具传递也行不通。有什么办法可以处理吗？

【问题讨论】：

我们无法根据这段代码重现您的问题。这只是一个无状态的功能组件。请提供mvce

标签： reactjs

【解决方案1】：

使用React.createElement 创建一个元素似乎可以解决问题。

const RoutePageContainer = ({ title, page }) => {
  const Page = React.createElement(page, null, null);

  return (
    <div className={styles.container}>
      {title && <h3 className={styles.title}>{title}</h3>}
      <div className={styles.page}>{Page}</div>
    </div>
  );
};

【讨论】：