您必须通过有效的ReactElement | Sweetalert反应

我试图使用sweetalert-react包（https://github.com/chentsulin/sweetalert-react）作为我的应用程序的模式。现在我得到它的工作，但我希望能够以显示有我的组件一个const：您必须通过有效的ReactElement | Sweetalert反应

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

我会得到错误：

You must pass a valid 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不会存在，所以不会显示任何内容。

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

来源

2017-10-04 Martin Nordström

尝试在单个节点元素'文本= {renderToStaticMarkup（

{clusterDoors}

）}' –

什么是'keyedCustomers [clusterDoor。 allocation.customer]'？为什么在你的三元组中假的条件被设置为“假”？ 'keyedCustomers [clusterDoor.allocation.customer]'实际返回'true'吗？ – Andrew

@Prakashsharma你是对的。如果你作出答复，我会接受它。谢谢。 –

与您的代码的问题是，您传递的元素数组，因为clusterDoors是一个数组和renderToStaticMarkup期待单个元素。因此你得到这个错误。

解决方案：只是包装你的数组中div标记，以便它变成这样

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

来源

2017-10-04 07:42:59

您必须通过有效的ReactElement | Sweetalert反应

回答

相关问题