質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1259閲覧

react jquery-uiを使う

cheche0830

総合スコア187

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1グッド

0クリップ

投稿2018/04/03 09:56

編集2018/04/04 02:53
import React from 'react'; import $ from 'jquery'; class Test extends React.Component{ componentDidMount() { var $left = $(".left"); var $right = $(".right"); $left.resizable(); } render() { return ( <div> <div class="l">aaa</div> <div class="r">bbb</div> </div> ) } }

上記はわかりやすくするため必要な部分のみ抜粋しています。

あるエリアをドラッグしたく、jquery-uiのresizableを入れたいのですが、
どうもうまくいきません・・

jqueryのinstallを既にできていて、適当な$("div").click(function() {console.log(111)});とかは
動いています。

jquery-uiのmoduleは既にインストールできているのですが、
それをどうコンポーネントに読み込んだらいいのかわかりません・・
import "jquery-ui";
と記述をしている記事も見てやってみたのですが、
resizable is not functionとエラーが出ます。

大体どのバージョンでも素で組んだhtmlでは動いたので、
バージョン情報は割愛しますが必要な場合は追記いたします。
環境はwebpackを使用しています。

ご協力のほどよろしくお願いいたします。

下記のURLに記載のあるものはすべてやってみましたがどれも
not function という同等のエラーでした・・
https://stackoverflow.com/questions/35259835/how-to-import-jquery-ui-using-es6-es7-syntax

追記:
import $ from 'jquery';
import 'jquery-ui/themes/base/core.css';
import 'jquery-ui/themes/base/theme.css';
import 'jquery-ui/themes/base/resizable.css';
import 'jquery-ui/ui/core';
import 'jquery-ui/ui/widgets/resizable';

で、jsの方はうまくいっていることがわかりました。
ただ、theme.cssのbackground-image: url("image/
がModule not found: Error: Can't resolve "image/
と画像のパスのえらーがでているようです。
こちら../../node_module、../nodo_moduleなどいろいろ
試してみたのですがだめなようで、
どうしたらよいでしょうか?

HayatoKamono👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

import React from 'react'; import { render } from 'react-dom'; import $ from "jquery"; import 'jquery-ui/themes/base/resizable.css'; window.jQuery = $; require('jquery-ui/ui/version'); require('jquery-ui/ui/plugin'); require('jquery-ui/ui/widget'); require('jquery-ui/ui/widgets/mouse'); require('jquery-ui/ui/widgets/resizable'); class Test extends React.Component { componentDidMount() { this.$left = $(this.refs.left); console.log(this.$left.resizable); this.$left.resizable() } render() { return ( <div> <div className="left" ref="left">aaa</div> </div> ) } } render(<Test />, document.getElementById('root'));

参考1

解決済みイシューがありました。
Test suite failed: jQuery is not defined #2337

同ページにて、ReactチームのDan Abramovが対応策を投稿しています。
https://github.com/facebook/create-react-app/issues/2337

回答欄に掲載したコードは上のリンク先のコードを参考にしています。

I would add that this is pretty broken (on jQuery side) as it’s not really compatible with modern bundlers, and you might have better luck using React-specific libraries instead. But it seems to work.

Dan Abramovによると、この問題はjQuery側がモダンなバンドラーに上手く適合していないことが原因のようです。

参考2

Integrating with DOM Manipulation Plugins

jQueryをreactで使う際のガイド的な内容が載ってます。

Note that we defined both componentDidMount and componentWillUnmount lifecycle hooks. Many jQuery plugins attach event listeners to the DOM so it’s important to detach them in componentWillUnmount. If the plugin does not provide a method for cleanup, you will probably have to provide your own, remembering to remove any event listeners the plugin registered to prevent memory leaks.

注意書きがあると通り、componentWillMountでjQuery pluginがDOMに取り付けたイベントリスナーを外してあげないとメモリーリークの原因になるので注意して下さい。

投稿2018/04/03 10:38

編集2018/04/03 10:59
HayatoKamono

総合スコア2415

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cheche0830

2018/04/04 04:04

ありがとうございます!試してみます!
HayatoKamono

2018/04/04 04:05

一応、動作確認済みです。
cheche0830

2018/04/04 05:17 編集

jsは問題なく動きました!ただ、 ドラッグ可能にした要素内に class="ui-resizable-handle ui-resizable-e" というドラッグできるハンドル部分が生成されるかとおもうのですが、 こちらにcssがあたっていないようで・・・ おそらくcssが読み込まれていないようなのですが、 import 'jquery-ui/themes/base/resizable.css'; 以外に何か読み込むひつようがありますでしょうか?
HayatoKamono

2018/04/04 06:02 編集

react内であれば、classではなく、classNameにするって話ですかね? 私が掲載したデモコードでは'<div className="left" ref="left">aaa</div>'となってますので確認してみてください。
cheche0830

2018/04/04 06:19 編集

いったんいただいたものをそのままやってみてるのですが、ドラッグできる部分の境目にマウスをホバーさせてもリサイズ可能アイコンに切り替わらない(そのcssがそもそも読み込まれていない?)ようで・・・ .ui-resizable-handle { position: absolute; font-size: 0.1px; display: block; } このcssがあたらないといけないはずなんですが(これに限らずresizable.cssがすべてあたっていない)開発ツールで見てもみあたらず・・・ ちょっといろいろ試してみます・・
cheche0830

2018/04/04 06:33

もしかするとcss-loaderを使っているのが原因でしょうか・・・
HayatoKamono

2018/04/04 06:41

とりあえず質問自体は解決してると思うので一旦閉じて別質問として投稿して頂けますか?その方がほかの方から回答を貰えやすいと思うので。
cheche0830

2018/04/04 06:53

はい!ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問