44

React のネストされたサイクルで何が間違っていますか? Google で情報を検索しましたが、適切なものが見つかりませんでした。私が間違っていると理解していることを見つけるのを手伝ってもらえますか?

図からわかるように、変数にデータがあります。そして、それはうまくいきます。しかし、 this 以外の値を追加すると<tr>、エラーが表示されます!

    var TableBalls80 = React.createClass({
        render:function(){
            var rows = this.props.rows;
            var columnId = 0, trKey = 0, divKey = 0, td1stKey = 0;
            var td2ndKey = 100;
            return(
                    <table className='table table-bordered bg-success'>
                                <thead>
                                <tr className='danger'>
                                    {rows[0].row.map(function (element){
                                        columnId++;
                                        return (
                                        <th colSpan="2" key={columnId}>{columnId}</th>);
                                    })}
                                </tr>
                                </thead>
                                <tbody>
                                    {rows.map(function (rowElement){
                                        return (<tr key={trKey++}>
                                        {rowElement.row.map(function(ball){
                                            console.log('trKey:'+trKey+' td1stKey'+td1stKey+' ball.value:'+ball.value+' td2ndKey:'+td2ndKey+' ball.count:'+ball.count);
                                            return(<div key={divKey++}>
                                                <td className='info' key={td1stKey++}>{ball.value}</td><td key={td2ndKey++}>{ball.count}</td>
                                            </div>);
                                        })}
                                        </tr>);
                                    })}
                                </tbody>
                            </table>);
        }
    });

エラー (別の から追加された項目によって異なります<tr>):

キャッチされないエラー: 不変違反: findComponentRoot(..., .0.1.1.0.2.0.0.1.$0.$9.$109): >要素が見つかりません。これはおそらく、DOM が予期せず (ブラウザなどによって) 変更されたことを意味します。これは通常、テーブルを使用するときに a を忘れたため、n......` です。

4

8 に答える 8

71

問題は、次のような仮想 DOM 構造を作成していることです。

<tbody>
   <tr>
      <div>
         <td>...</td>
         <td>...</td>
      </div>
   </tr>
</tbody>

<div/>ブラウザの有効な子ではないため<tr>、実際にはこれを表す DOM が作成されます。

<div> </div>
<table>
<tbody>
   <tr>
      <td>...</td>
      <td>...</td>
   </tr>
</tbody>
</table>

フィドル

反応が更新されると、それを見て、<tr>どこに行ったのか疑問に思い<div>ます。代わりに a が見つかる<td>ため、エラーがスローされます。

于 2014-07-30T00:31:43.583 に答える
4

テストのためにこれを実行しようとすると、上記のエラーが発生しました。

component = React.addons.TestUtils.renderIntoDocument(<MyTableRow />)
React.findDOMNode(component)

私の修正は、レンダリングする前にラップすることでした:

component = React.addons.TestUtils.renderIntoDocument(<table><MyTableRow /></table>)
table = React.findDOMNode(component)
row = jQuery(table).find("tr")[0]
于 2015-08-25T07:42:01.877 に答える
1

私の場合、問題はボタンのタイプにありました。type="button"aで aを使用すると、ReactDOM が失われます<button>。

を削除して onClick ハンドラにtype="button"追加したところ、うまくいきました。event.preventDefault()

于 2016-09-23T10:56:55.047 に答える
1

私はこれと同じ問題を抱えていましたが、DOM 内に同じ ID を持つ 2 つの要素があることがわかりました (不注意で)。

于 2016-05-12T02:28:06.853 に答える
0

このエラーは、無効な HTML マークアップがどこかにあるために発生します。

私の場合、React でボタン タグ内にフォーム タグを生成するのが不器用で、このエラーが表示されるまで気づきませんでした。許可されていない入れ子の間違いがないか、マークアップを確認してください。

于 2016-03-24T19:49:20.657 に答える
0

また、react https://github.com/facebook/react/issues/3811でこの問題を確認してください。これには、「React render メソッドから複数のコンポーネントを返すことができないという現在の制限があります。」と書かれているので、複数の要素を返す場合は、レンダリングも確認する必要があります

于 2015-11-02T20:10:39.350 に答える
0

同様の問題がありました。その理由は<form>、React.js コンポーネント内でタグを使用していて、既に<form>開いているページ位置にレンダリングしたためです。フォームはネストできません。そのため、コンポーネント内の HTML が有効であるように見えても、このエラーが発生する可能性があります。

于 2016-02-24T19:13:09.567 に答える