問題タブ [react-bootstrap]

私はレールアプリケーションで反応してブートストラップしましたが、これまでのところ、それらは独立してうまく機能しています。react-bootstrap を使用して機能を結合したいと考えています。このチュートリアルに従って作業を進めています: http://react-bootstrap.github.io/getting-started.html。

私はCommonJSの部分をやりました。私がした場所：

ターミナルで。

次に、アセット内の application.js ファイルに移動し、次のコードを追加しました。 Var Alert = require('react-bootstrap').Alert;

コンソールでは、この行でエラーが発生し、次のように表示されますUncaught ReferenceError: require is not definedapplication.js?body=1:28 (anonymous function)

どうすれば働く必要がありますか？

ウィンドウの端に近づかない限り、うまく機能する反応ブートストラップ ツールチップがあります。その場合、ツールチップを切り取るのではなく、テキスト全体に合わせてサイズを変更し、すべての側面に境界線を付けたいと考えています。

また、ツールチップの矢印がトリガー要素 (私の場合は「i」アイコン) のすぐ上を指すようにします。

私の推測では、ReactBootstrap.Tooltipレンダリングが完了したら、DOM を操作する必要があると思います。現在のサイズとウィンドウの上部と左のオフセット位置を計算して、再配置/サイズ変更できるようにする必要があります。

これが私の現在のコードです（CoffeeScriptで）：

そして、ここに問題のスクリーンショットがあります:

この問題を解決するにはどうすればよいですか?

フォーム コンポーネントの無効なユーザー名フィールドの正規表現でポップオーバーを表示するオーバーレイ トリガーを作成するために、ここに示すコード例を再生しようとしていました。Cannot update during an existing state transition (such as within "render"). Render methods should be a pure function of props and state.このコードを実行しようとすると、古典的なエラーが発生します。

いつものように、これに関するヘルプは大歓迎です。ありがとうございました。

私はこれらすべてに非常に慣れていないため（約3日で）、私の無知を許してください.

React、React-Router、React-Bootstrap を組み合わせて使用​​しています。この男のように、React-Router<Link />と React-Bootstrap の<NavItem />機能を組み合わせて、.activeクラスが<li>要素ではなく (または要素と同様に) 要素に適用されるようにしたいと考えてい<a>ます。

本当にイライラするのは、これが機能していたのに、関係のない変更を加えたときに停止したことです (それ以来、元に戻したと思います)。

これが私のコードです：

listlink.js

app.js

let isActive =...にブレークポイントを設定するとlistlink.js、それぞれ 1 回、5 回目の 5 回ブレークします。が であるのは今回で 5 回目であり、参照するとエラーがスローされます。<ListLink>this.props.totoonthis.context.routerundefined.isActive

宣言のせいかなと思ったの<DefaultRoute />ですが、そうではないようです（行をコメントアウトしても違いはありません）。/#/[page]URL にどちらが含まれているかに関係なく、常にtoon5 回目の反復であり、常に同じエラーで失敗します。

Uncaught TypeError: Cannot read property 'isActive' of undefined

これ以上デバッグする方法がわかりません。アイデア？

react-bootstrap + requirejs + bower + php (nodejs ではない) を使用して、入門アプリをセットアップしています。このスペクトルのツールには非常に新しいものです。ここに私のアプリがあります：

.bowerrc

bower.json

index.html

javascript/setup.js

javascript/app/main.js

アプリケーション構造

私はこのようにsthを試しました: app/main.js

これは私に与えます： Error: Invariant Violation: React.render(): Invalid component element. Instead of passing a component class, make sure to instantiate it by passing it to React.createElement.

編集 私の質問を無視してください。

アプリ/main.js

こんにちは、折りたたみ可能 mixin の使用方法を知っています。折りたたみ可能にすることはできますが、全体を折りたたみ可能にすることはできません。

それを行うのは本当に難しいですが、それを行う方法の手がかりはありますか?

どうもありがとう ！

プロジェクトに react-bootstrap を使用しており、カスタム bsStyle プロパティをボタン コンポーネントに追加しようとしています。次のリンクhttp://react-bootstrap.github.io/components.html#buttonsに従ってデフォルトのブートストラップ クラスを使用すると、クラス名が適切にレンダリングされます。ただし、プロパティを変更すると、bsStyle='facebook'btn-undefined がレンダリングされます

要するに、反応ブートストラップで bsStyle プロパティをグループに渡すと、どこが間違っているのかわかりません。

これは私のHTMLのようです

コードを次のように変更すると

正常に動作し、クラスが適切にレンダリングされます。

これはコンソールの HTML ログです

反応を調査し始めたばかりで、bower にインストールされている場合にreact-bootstrapを使用する方法を理解しようとしましたが、開始部分に従いましたが、どのように機能するかがよくわかりません。

ここにマークアップがあります

このパッケージでブートストラップ コンポーネントを生成するにはどうすればよいですか?

アップデート

わかったと思いますが、正しく使用しているかどうかわからないので、マークアップで

Alert.jsコンパイルされたjsxです