問題タブ [trix]

<trix-editor>コンポーネント内の要素にアクセスするのに助けが必要Mutationです。私はReact hook useRef()これにアクセスするために使用していますが、null. （下の画像）からChrome Dev Tools、要素が参照されていることがわかります。こことここで与えられた解決策のいくつかを試しましたが、うまくいきませんでした。Mutationコンポーネントのレンダリングに問題があるようです。私はにかなりReact慣れていないので、これが正しいかどうかわかりません。私は何を間違っていますか？よろしくお願いいたします。

私のコード:

更新：興味のある人は、 コンポーネントを別のファイルに抽出することで問題が解決しました。Mutation理由は、コンポーネントがMutationレンダリング時にマウントされておらず、Queryコンポーネントのみがマウントされていたためです。ソリューションの最初の繰り返しが回答として表示されます。

カスタム埋め込みモデルをセットアップしたので、Instagram や YouTube の埋め込みなどを自分のサイトのアクション テキスト コンテンツに追加できます。Instagram の埋め込みでは正しく機能しますが、YouTube では機能しません。

参考までに、表示したいYouTubeの埋め込みコードは次のとおりです。

models/recipe.rb:

モデル/embed.rb:

埋め込み/_embed.html.erb:

views/recipes.show.html.erb (実際にコンテンツを表示しようとしている場所 - @recipe.body はアクションテキストです):

コンテンツの編集時に YouTube の埋め込みが表示されますが (trix エディターに表示されます)、レンダリングされたコンテンツを表示すると何も表示されません。周囲の div が表示されるので、ページに追加されていることはわかりますが、iFrame は表示されません。

インスタグラムの埋め込みは問題なく機能するため、面倒です。参考までに、インスタグラムの埋め込みは次のようになります。

embeds/_embed.html.erb を次のように変更すると、これは iframe に関連しているように感じます。

何もレンダリングしません。