失败的道具类型：提供给“ForwardRef（Grid）”的无效道具“children”

Question

这只是问题的一个例子，我可以使用许多元素来创建问题。 替换元素的子组件时，正确的方法是什么，以免将 Invalid prop children提供给`ForwardRef？

const dynamicJSX = () => {
  return (
    <div>Working</div>
  )
}

return (
  <Grid container >
    <Grid item >
      {dynamicJSX}
    </Grid>
  </Grid>
)

Answer 1

您应该使用<dynamicJSX />而不是传递它的引用。 这样，您可能希望将其重命名为<DynamicJSX /> （为了约定）。

如果dynamicJSX更多的是 util 渲染方法而不是功能组件，您也可以调用{dynamicJSX()} 。