Question

我正在尝试使用sweetalert-react包（https://github.com/chentsulin/sweetalert-react）作为我的应用的模式。现在我让它工作，但我希望能够显示一个包含我的组件的const：

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

所以我读了他们的文档，发现我可以用ReactDOMServer.renderToStaticMarkup实现这个目标。所以我很简单需要：

text={renderToStaticMarkup(<MyComponent />)}

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

text={renderToStaticMarkup({clusterDoors})}

我会收到错误：

您必须传递有效的ReactElement。

我想知道是否有一些解决方法？

我做了一些研究并尝试过尝试：

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>
      )
    })
  }
})

但那并没有成功。

如果我传递了一个有效的反应组件（ClusterListItem），我的应用程序就不会中断，但由于array clusterDoor不存在，所以不会显示任何内容。

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

Answer 1

您的代码的问题在于您传递的是元素数组，因为clusterDoors是一个数组，而renderToStaticMarkup期待一个元素。因此，您收到此错误。

解决方案：只需将数组包装在div标记中，使其成为单个节点元素，如下所示

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

您必须传递有效的ReactElement | Sweetalert反应的

1 个答案: