只需创建一个有效的JSX元素。在我的例子中，我将一个组件分配给一个对象。

const AwesomeButtonComponent = () => <button>AwesomeButton</button>
const next = {
  link: "http://awesomeLink.com",
  text: "Awesome text",
  comp: AwesomeButtonComponent
}

在我的代码的其他地方，我想动态分配那个按钮。

return (
  <div>
    {next.comp ? next.comp : <DefaultAwesomeButtonComp/>}
  </div>
)

我通过声明一个通过props comp初始化的JSX comp来解决这个问题。

const AwesomeBtnFromProps = next.comp
return (
  <div>
    {next.comp ? <AwesomeBtnFromProps/> : <DefaultAwesomeButtonComp/>}
  </div>
)

只需删除return语句中的花括号。

之前:

render() {
    var rows = this.props.products.map(product => <tr key={product.id}><td>{product.name}</td><td>{product.price}</td></tr>);
    return {rows}; // unnecessary
}

后:

render() {
    var rows = this.props.products.map(product => <tr key={product.id}><td>{product.name}</td><td>{product.price}</td></tr>);
    return rows; // add this
}

我只是让自己经历了一个非常愚蠢的错误版本，我不妨在这里为后代分享一下。

我有一些JSX是这样的:

...
{
  ...
  <Foo />
  ...
}
...

我需要注释掉它来调试一些东西。我在IDE中使用键盘快捷键，结果是这样的:

...
{
  ...
  { /* <Foo /> */ }
  ...
}
...

当然，这是无效的——对象作为react子对象是无效的!

只是想我将添加到这个，因为我今天有同样的问题，事实证明，这是因为我只是返回函数，当我在<div>标签中包装它时，它开始工作，如下所示

renderGallery() {
  const gallerySection = galleries.map((gallery, i) => {
    return (
      <div>
        ...
      </div>
    );
  });
  return (
    {gallerySection}
  );
}

以上原因导致了错误。我通过将return()部分更改为:

return (
  <div>
    {gallerySection}
  </div>
);

.．.或者仅仅是:

return gallerySection

React子(单数)应该是基本数据类型的类型而不是对象，或者它可以是JSX标记(这不是在我们的情况下)。在开发中使用Proptypes包以确保进行验证。

只是一个快速的代码片段(JSX)比较，以代表您的想法:

Error : With object being passed into child <div> {/* item is object with user's name and its other details on it */} {items.map((item, index) => { return <div key={index}> --item object invalid as react child--->>>{item}</div>; })} </div> Without error : With object's property(which should be primitive, i.e. a string value or integer value) being passed into child. <div> {/* item is object with user's name and its other details on it */} {items.map((item, index) => { return <div key={index}> --note the name property is primitive--->{item.name}</div>; })} </div>

TLDR;(来自下面的源代码):确保你在JSX中呈现的所有项都是原语，而不是使用React时的对象。发生此错误通常是因为分派事件的函数被赋予了一个意外的对象类型(即当您应该传递字符串时传递了一个对象)或组件中的JSX部分没有引用原语(即此。Props vs . this.props.name)。

Source - codingbismuth.com

我的问题很简单，当我面对以下错误:

objects are not valid as a react child (found object with keys {...}

只是，我正在传递一个对象与错误中指定的键，而试图直接在组件中使用{object}渲染对象，期望它是一个字符串

object: {
    key1: "key1",
    key2: "key2"
}

当在React组件上渲染时，我使用了如下所示的东西

render() {
    return this.props.object;
}

但它本该如此

render() {
    return this.props.object.key1;
}