4

React を使用しているアプリケーションがあります。現在、 bootstrap-wysiwyg/bootstrap3-wysiwygパッケージを実装しようとしているところに問題があります。

<textarea>テキスト エディターとして機能させるootstrap-wysiwyg/bootstrap3-wysiwygには、テキスト エディターで次の JQuery 関数を実行する必要があります。

$(".textarea").wysihtml5()

ここに私のコンポーネントがあります:

import React, { Component } from 'react'

export class MyTextEditor extends Component {
    render() {
        return (
            <div className="form-group">
                <textarea className="textarea"></textarea>
            </div>
        )
    }
}

<textarea>その JQuery 関数をReact コンポーネントのmy に適用するにはどうすればよいですか?

React と JQuery をブレンドするのはあまり良い方法ではないことはわかっていますが、これが機能するためには本当に必要です。パッケージを機能させる別の方法がある場合は、代わりにそれを回答としていただければ幸いです。

そうでなければ、誰かがこれを機能させるのを手伝ってくれるなら、それは大歓迎です!

更新：（ まだ探しています）

すべての提案をありがとう。私はたくさん試しましたが、それらはすべて問題を引き起こしました:

  1. <ReactQuill>まったくうまく表示されません。ボタンは巨大です。
  2. <EditableDiv>私に与えます：Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs.
  3. Syam Mohanの答えは私に与えます：Uncaught TypeError: Cannot read property 'font-styles' of undefined at f

まだうまくいくものを探していますが、これまでのすべての努力に感謝します!

4

2 に答える 2

3

これを試して：

import React, { Component } from 'react';
import $ from 'jquery'; 

export class MyTextEditor extends Component {

  componentDidMount() {
    $(".textarea").wysihtml5()
  }

  render() {
    return (
        <div className="form-group">
            <textarea className="textarea"></textarea>
        </div>
     )
  }
}

注: JQuery ライブラリを追加することを忘れないでください

于 2016-12-26T13:07:52.500 に答える