問題タブ [reactjs]

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

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

これは何が原因ですか？

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

双方向バインディング ヘルパーを使用していますが、有効なキー文字列を提供できません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ように表示されます。

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

ありがとう！

反応コンポーネントが反応でアプリ全体を管理しています。次のようになります。

そしてhtmlは次のようになります

そして、私はそれを次のようにレンダリングします:

しかし、代わりに、タグ全体を管理するように反応したいbodyので、ネストされた冗長なものはありませんdiv。どうすればそのようなものをレンダリングできますか?

ブラウザの戻るボタンと進むボタンが直感的に機能するように、reactjsで履歴を処理しようとしています。これの例、または従うべき一般的なガイドラインはありますか?

ありがとう！

私はFacebook の React チュートリアル http://facebook.github.io/react/docs/getting-started.htmlを大まかにフォローしていますが、別の html ファイルに適用しています。

これは、react スターター キットに基づく私の html ファイルです。

「jsx --watch src/build/」を実行すると、react-toolsをインストールしました

このスニペットを変換しています：

このスニペットに：

ただし、チュートリアルには次のスニペットが示されています。

小文字の 'r' が原因で、Web ページは「react が定義されていません」というエラーをスローします。これは本当です。クロムのコンソールから、「react」ではなく「React」が定義されていることを確認できます。

チュートリアルで説明されているように、jsx で正しい出力を作成するにはどうすればよいですか?