コンポーネントキーを使用して配列から要素を削除するReactjs

Question

私のコードは機能しますが、これは良いコーディング慣行かどうか、または後で問題を引き起こすかどうかを明確にしたかっただけです。

バックグラウンドのビットとして、前の質問How to filter through array of components/elements in reactjsと似ています。しかし今回は、dom要素の配列をフィルタリングする代わりに、配列の要素をフィルタリングしています。ここで私はそれをやった方法は次のとおりです。

親：

delete_this(index) 
{ 
    let key = index._reactInternalInstance._currentElement.key; 
    this.repeats = this.repeats.filter((item) => 
    { 
     return item.key !== key; 
    }); 
    this.setState({ repeats: this.repeats }); 
} 

子供：

delete_this(value) 
{ 
    this.props.delete_this(value); 
} 
render() 
{ 
    <button onClick={this.delete_this.bind(this, this)} ref={ (input) => { this.button = input; } }>delete</button> 
} 

は、私は、オブジェクト自体にフィルタをやってみましたが、それは私が代わりにキーを使用し動作しませんでした。

Answer 1

これに非常に類似している他の質問に記載されているように、_reactInternalInstanceのような内部プロパティに頼るべきではありません。

これらは「プライベート」であり、リアクションチームは技術的にいつでも非難することができます。私はセマンティヴ・チームのリアクト・チームの方針を知らないが、私は内部的なAPIの変化を大きな変化として疑う。

質問に答えるには、問題が発生する可能性があります。

あなたは単に直接deleteメソッドにIDを渡すことができます。

<button onClick={() => this.props.delete_this(this.props.id)}>delete</button>