Preact X中调用children传参报错children is not a function是什么原因

报错原因 #

该问题是Preact X内置的children处理逻辑和React不兼容导致的：
Preact X默认会将所有组件的children统一转换为数组结构，哪怕你只传入了单个函数类型的子元素，父组件拿到的children也是包含这个函数的数组，而非函数本身，调用数组自然会抛出children is not a function的错误。
注：你给出的示例代码里还存在一处笔误：<div>{test}></div>多了一个多余的>符号，修复问题时可以同步移除。

修复方案 #

你可以根据项目情况任选以下一种方案处理：

• 调整父组件取值逻辑，优先取数组首项

  function Parent({ children }) {
      // 兼容数组和非数组两种情况
      const renderChild = Array.isArray(children) ? children[0] : children
      return <div>{renderChild("Test")}</div>
  }
  

• 避开children属性，使用自定义prop传递渲染函数
  这种方式改动量更小，也不会受框架对children的默认处理逻辑影响：

  // 父组件定义
  function Parent({ render }) {
      return <div>{render("Test")}</div>
  }
  
  // 组件调用
  function Test() {
      return (
        <Parent render={test => <div>{test}</div>} />
      )
  }
  

• 开启React兼容模式
  如果项目需要大量兼容React生态的写法，可以引入preact/compat兼容层，开启后children的处理逻辑会和React完全对齐，无需修改原有组件代码。

内容的提问来源于stack exchange，提问作者Aaron