失敗的道具類型：提供給“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()} 。