错误-对象作为React子对象无效

Question

CodeSandbox

  

对象作为React子对象无效（找到：带有键的对象   {children}）。如果您打算渲染儿童集合，请使用   而不是数组。

如何解决此问题？

Answer 1

我将回答您的问题，但是下次您需要在问题中包括相关代码，而不仅是链接到外部项目，因为这会使我们更难，更耗时地查看代码。幸运的是，您的代码很少，所以我能够找到问题所在

您面临的问题在这里：

const Text = children => {
  return <span style={{ whiteSpace: "pre-wrap" }}>{children}</span>;
};

react中的

children是一个道具，它会自动在对象内部传递给组件。因此，要访问它，您需要将文本“哑”组件更改为此：

const Text = ({children}) => {
  return <span style={{ whiteSpace: "pre-wrap" }}>{children}</span>;
};

这将允许您的组件获取props对象，并从其中解构children字段