Elm内で反応成分を使用する方法はありますか？

Question

私はReactの中でElmのコンポーネント（「モジュール」はまだ学習の言い分）を使用して、libraries like react-elm-componentsの確立パターンであることを知っていますが、その逆を行う方法はありますか？

は、例えば、このようなものが可能です：

Top-level React App 
-> React layout/component 
    -> Elm components 

しかしこれについて：

Top-level Elm App 
    -> Elm layout/components 
    -> React components 

ことが可能である場合は、「ニレ・アット・ボトム」パターンが優れていますか？可能性のある説明文であると思われない理由を試してみてください&

Answer 1

としては、これは動作しません指摘のように、ある理由onloadのが、あなたは常にコンポーネントに反応レンダリングすることができ

似た何かを探して他の誰かを助けるかもしれない - 'ゴマあなたが得ますそれを書き換えようとしています;） - Elmノードの内部。トリックはそれをマウントするつもりです。ヒップからの撮影：これはちょっとハッキリです（ちなみに、Elmからデータを取得してコンポーネントの消耗品JS形式にしなければならないので、ちょっと高価です（Json.Encode.encodeとJSON.parse）。ThatComponent、Reactあなたはそれが自身の状態を維持するとの問題ですが、あなたが持っているだろう何

import Html exposing (Html, div) 
import Html.Attributes as Attr exposing (attribute) 
import Json.Encode as Encode exposing (Value) 


reactComponent : String -> (a -> Value) -> a -> Html msg 
reactComponent componentName encoder data = 
    let 
     jsonProps : String 
     jsonProps = 
      Encode.encode 0 <| encoder data 

     -- a script to load the React component on `this` which is 
     -- the `div` element in this case. 
     onLoad : String 
     onLoad = 
      String.join "" 
       [ "javascript:" 
       , "window.ReactDOM.render(" 
       , "window.React.createElement(window[\"" 
       , componentName 
       , "\"], JSON.parse(" 
       , jsonProps 
       , ")), this)" 
       ] 
    in 
     div [ attribute "onload" onLoad ] [] 

の線に沿って何かを試みることができるwindowオブジェクト上、およびReactDOM - 明らかに悪いですし、エルムアーキテクチャに対して実行されます（ただし、おそらくそれを知っていて、あらかじめ構築されたものを再利用したいと思っています）。あなたはポートを使ってデータを送り返すことができますが、reactComponentをHtml.Lazy.lazy3にラップして再レンダリングしないようにしたいと思います（エンコーダとデータを別々に送信する理由です）。

Answer 2

しないでください。エルムの全ポイントは六角形のデザインです。エルムは、JSの邪悪が浸透できない閉鎖的なシステムとして機能することを意図しています。これは、JSにElmを組み込むことがファーストクラスであり、その逆を見つけるのに苦労している理由です。 ReactをElmに組み込むというアイデアは、Elmの決定論と保証の価値を引き継ぐことです。エルムはまったく使用しないかもしれません。

ブラウザで機能プログラミングを行い、ReactコンポーネントをElmアーキテクチャで使用したい場合は、PureScript PUXをチェックしてください。 PUXはそのユースケースのために設計されており、Elmがハックするよりも優れた結果を得ています。

私のコメントがあなたのための初心者ではない場合、私はこのように邪悪であるために、悪いことはしないで次のアドバイスを提供することができます。

まず、portsでこれを達成できます。反応コンポーネントをレンダリングする場合は、Elmアプリケーションを記述して、ポート上のイベントをJavaScriptに送信します。その後、Elm Dom空間の内部に反応コンポーネントをJavaScriptで標準的な方法でレンダリングします。

2番目（これは正しく実行するのに最も近い）、これはElmネイティブモジュールを使用して記述できます。これには、Elmの文書化されていないランタイムを学び、それと相互作用するコードを書く必要があります。あなたがやることは、Elmの低レベルシステムにカスタムHtml要素を書き込んで、Reactを内部でレンダリングし、再レンダリングを管理することです。

幸運を祈る！

Answer 3

私は同じことをやろうとしています。私は人気のあるReact date pickerをとり、ポート経由で相互運用することから始めました。それはまだ進行中で働いていますが、その後、私のポートコードがtoastal @

import datepicker from './reactDPPort.jsx'; 
elm.ports.trigger.subscribe((s) => { 
    datepicker(s, res => app.ports.toElm.send(res.toString())); 
});