有効なReactElementを渡す必要があります。 Sweetalert-react

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

私はエラーが発生します。

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が存在しないため、何も表示されません。

私は自分の状況をよく説明してくれることを願っています。読んでくれてありがとう。

Answer 1

コードの問題は、clusterDoorsが配列で、renderToStaticMarkupが1つの要素を必要としているため、要素の配列を渡していることです。したがって、このエラーが発生しています。

ソリューション：それはこの

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