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

【问题标题】：Failed prop type: Invalid prop `children` supplied to `ForwardRef(Grid)`失败的道具类型：提供给“ForwardRef（Grid）”的无效道具“children”
【发布时间】：2020-05-19 20:50:37
【问题描述】：

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

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

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

【问题讨论】：

正如@aquinq 指出的那样。 dynamicJSX 不是有效的 jsx 元素或不是 jsx 元素的列表。它是一个组件。因此它必须呈现为<dynamicJSX />
const JsxElement = <div> hey </div> const Component = (props) => { return (<div> lol </div>) }

标签： reactjs

【解决方案1】：

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

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

【讨论】：

太棒了。我显然错过了学习中的一个基本信息。谢谢！