問題タブ [reactjs]

React (および cljs の場合は Om) は非常に魅力的に見えますが、同じページ/アプリで React コードと一緒に jQuery や jQueryUI コンポーネントなどの非 React コンポーネントを使用することはおそらく不可能だと思います。

誰でも確認できますか？

次のコードを AngularJS から React に移植しています。

私は試した：

で失敗しましParse Error: Line X: Unexpected token }た。

私が思いついた最高のものは次のとおりです。

量が多く" + this.state.XXX + "てとても読みにくいです。

それを行うより良い方法はありますか？

render メソッドが指示しているときに、適用されReactTransitionGroupたばかりの要素が後で.superfade-leave-active適用されないという問題があります。.superfade-enter

http://jsfiddle.net/joecritch/6bpJD/3/

ロジックは、表示されるメッセージがReactTransitionGroupリストの最初の項目であり、私のUserSearchResultsコンポーネントが 2 番目の項目です。後者は、データがロードされたときにのみ表示されます。(データは上部で配列としてモックされ、500 ミリ秒の遅延で読み込まれます。)

望ましい結果:リストにテキストがある場合は常に最初の要素が表示されます。秒は、データがロードされるたびに常に表示されます

実際の結果:最初の要素は期待どおりに機能します。2 番目は最初に表示されますが、500 ミリ秒後にテキストが変更されると、アニメーションが消えます。

注: animate コンポーネントを削除すると、期待どおりに機能します。

別のコンポーネントを介してレンダリングされたボタンを取得して、別のコンポーネントの状態を参照および/または影響しようとしています。

入力の add 関数にアクセスできる新しいコンポーネントを作成したいと考えています。次のように直接参照しようとしましたInputs.add：

しかし、それはうまくいきませんでした。別のコンポーネントを介してコンポーネントの機能にアクセスしたり、別のコンポーネントを介してコンポーネントの状態に影響を与えたりするにはどうすればよいですか? ありがとう。

多数の画像を含むページ (基本的には画像ギャラリー) を作成します。ギャラリー ページを更新して、新しい画像エントリを追加したり、既存の画像エントリを削除したりすることがあります。画像のエントリは、次の関数を使用して作成されます。関数が最初に呼び出されたときは正常に完了し、その後、更新されたモデルを処理するために呼び出しが失敗し、例外が発生します。

「キャッチされていないエラー:不変の違反」。

これは何が原因ですか？

私の状態は次のとおりです。

双方向バインディング ヘルパーを使用していますが、有効なキー文字列を提供できませんlinkState:

私の例から取得する this.linkStateなど、いくつかのクエリ構文を受け入れるといいでしょう。"0.type""translateX"

回避策はありますか?

React.addons.LinkedStateMixinのドロップイン置換であるDeepLinkState mixinを作成しました。使用例:

linkState("0.x")も許容される構文です。

jsx をコンポーネントのレンダリング関数から別のファイルに移動する方法はありますか? もしそうなら、レンダリング関数でjsxを参照するにはどうすればよいですか?

React でコーディングを始めたばかりで、CoffeeScript でのコーディングには慣れています。React docs に示されているチュートリアルに沿ってコーディングを試み、ステータス更新のために同様のものを作成しました。

しかし、私は得てTypeError: this.props.data.map is not a functionいます。

私はちょっと迷っていて、どこが間違っているのだろうと思っています。誰かが私を導き、どこが間違っているのか教えてもらえますか?

これは私のコードです:

私は最近 React を学んでいましたが、次の構造の HTML テーブルをモデル化してレンダリングしようとして問題に遭遇しました (ヘッダーの colspan 属性を使用して 2 つに分割された列に注意してください)。

次のようにテーブルをモデル化しました。

Table以下をレンダリングするMain component 。

コンポーネントは次のHeaderようにレンダリングされます<th colSpan="2">Col 1 Header</th>

それぞれRowが次のようにレンダリングされます

コンポーネントCellは、各列を 2 つのサブ列に分割したいときに問題が発生する場所です (ヘッダー列のようにcolSpan="2")。

ReactComponentの render()メソッドは 1 つの子コンポーネントを返す必要があるため、次のように 2 つのセルを返す方法がわかりません。<td>Data 1A</td><td>Data 1B</td>

テーブル以外の状況では、次のようなものを返すことができます

しかし、テーブルでこれを達成する方法がわかりません。コンポーネント構造の設計方法が少しずれているのではないでしょうか?

React を使用して特定の入力を削除できるフォームを実装しようとしています。問題は、react が情報を正しくレンダリングしていないように見えることです。これは私のレンダリング機能です:

そして私の破壊機能：

実際の破棄関数は、 を介して子コンポーネントを介して呼び出されます<a href="#" onClick={this.props.onDestroy}>(Remove)</a>。興味深いのは、render 関数で見られるように、入力をコンソール ログに記録すると、正しい入力が表示されることです。destroy 関数を呼び出した入力はなくなっています。しかし、間違った入力がレンダリングされます - 消えるのは常に最後の入力であり、破棄関数を呼び出した入力ではありません。たとえば、最初にログに記録します。

Last Name に対して destroy 関数を呼び出します。には次のconsole.logように表示されます。

ただし、実際にレンダリングされた情報は次のように表示されます。

ありがとう！