Javascript 您必须传递有效的ReactElement | Sweetalert react

我正在尝试使用

sweetalert react

包（）作为我的应用程序的模式。 现在我让它工作了，但我希望能够显示一个包含我的组件的常量：

const clusterDoors = lock.doors.map(clusterDoor => {
  return (
    <div key={clusterDoor.port_id}>
      <ClusterListItem
        clusterDoor={clusterDoor}
        customer={
          clusterDoor.allocation.customer ? (
            keyedCustomers[clusterDoor.allocation.customer]
          ) : (
            false
          )
        }
        .....

但问题是我的分量在一个常数内，所以如果我尝试这样做：

text={renderToStaticMarkup({clusterDoors})}

我将获得错误：

您必须传递一个有效的元素

我想知道是否有解决办法

我做了一些研究，也试着做：

const clusterDoors = React.createClass({
  render: function() {
    lock.doors.map(clusterDoor => {
      return (
        <div key={clusterDoor.port_id}>
          <ClusterListItem
            clusterDoor={clusterDoor}
            customer={
              clusterDoor.allocation.customer ? (
                keyedCustomers[clusterDoor.allocation.customer]
              ) : (
                false
              )
            }
            delivery={
              clusterDoor.allocation.delivery ? (
                keyedDeliveries[clusterDoor.allocation.delivery]
              ) : (
                false
              )
            }
          />
        </div>
      )
    })
  }
})

const clusterDoors=React.createClass({
render:function（）{
lock.doors.map（clusterDoor=>{
返回(
)
})
}
})

但这并没有奏效

如果我向它传递一个有效的react组件（

ClusterListItem

），我的应用程序将不会中断，但不会显示任何内容，因为

数组clusterDoor

不存在

---

我希望我能很好地解释我的情况。感谢阅读。

您的代码的问题是您正在传递一个元素数组，因为

clusterDoors

是一个数组，

renderToStaticMarkup

需要一个元素。因此，您得到了这个错误

解决方案：只需将数组包装在一个

div

标记中，使其成为如下所示的单个节点元素

text={renderToStaticMarkup(<div>{clusterDoors}</div>)}

text={renderToStaticMarkup（{clusterDoors}）}

Try

text={renderToStaticMarkup（{clusterDoors}）}

什么是

keyedCustomers[clusterDoor.allocation.customer]

？为什么在您的三元组中将false条件设置为

false

？

keyedcustomes[clusterDoor.allocation.customer]

是否实际返回

true

？@Prakashsharma您是对的。如果你回答，我就接受。谢谢。@Andrew不，它现在实际上什么也不退。这很奇怪，因为

keyedDeliveries[clusterDoor.allocation.delivery]

确实返回对象。和

keyedDeliveries

和

keyedCustomers

具有相同的数据结构。@MartinNordström这听起来像是一个不同的问题，但我非常惊讶的是，在尝试渲染时没有出现错误，除非

keyedCustomers

始终存在。

text={renderToStaticMarkup(<div>{clusterDoors}</div>)}