refを含むコンポーネントの配列

Question

4つの行のゲームで、コンポーネントの配列を作成します。親コンポーネントから特定のコンポーネントのメソッドを呼び出す必要があります。

フィールドを構築する2つの方法は次のとおりです。 renderRowで私は、コンストラクタで定義されている配列にrefを入れます。

renderRow(row){ 
    var Buttons = new Array(this.props.w) 
    for (var i = 0; i < this.props.w; i++) { 
    thisButton=<FieldButton ref={(r) => { this.refField['row'+ row +'col'+ i] = r; }} handler={this.actionFunction} key={'row'+ row +'col'+ i}></FieldButton> 
    Buttons.push(thisButton) 
    } 
    return Buttons 
} 

renderField(){ 
    var Field = new Array(this.props.h); 
    for (var i = 0; i < this.props.h; i++) { 
    var row = this.renderRow(i); 
    Field.push(<View key={i} style={styles.fieldWrap}>{row}</View>); 
    } 
    this.field = Field; 
} 

actionFunctionは単に現在のrefを出力します。

actionFunction(pos) { 
    console.log(this.refField['row'+ pos.row +'col'+ pos.col]) 
} 

問題：出力は未定義です。

編集： 私はreField変数をCONSOLE.LOG場合、これが出力されます：

Answer 1

が実際にリアクトちょうどこの呼ばレフリーのための特別な性質を持っています！あなたは、実際にはオブジェクトへの参照の名前を設定し、this.refs.referenceNameを使用して、クラス内の任意の場所に、そのオブジェクトにアクセスすることができます

https://reactjs.org/docs/refs-and-the-dom.html

。オブジェクトに参照を設定するとき、プロパティ名は 'ref'（単数）であり、アクセスするときは 'this.refs'（複数）を使用することに注意してください。例えば ：今

renderRow(row){ 
    var Buttons = new Array(this.props.w) 
    for (var i = 0; i < this.props.w; i++) { 
    const thisButton=<FieldButton ref={'row' + row + 'col' + i} handler={this.actionFunction} key={'row'+ row +'col'+ i}></FieldButton> 
    Buttons.push(thisButton) 
    } 
return Buttons 
} 

、あなたはactionFunctionからFieldButtonことを取得する必要がある場合：

actionFunction(pos) { 
    console.log(this.refs['row'+ pos.row +'col'+ pos.col]) 
} 

注：また、あなたの関数がクラスのインスタンスにバインドされていることを確認してください。

Answer 2

解決策は、varの代わりにletを使用してforループの変数を初期化することでした。 ワーキングコード：

renderRow(row){ 
    var Buttons = new Array(this.props.w) 
    for (let i = 0; i < this.props.w; i++) { 
    let thisButton=<FieldButton ref={(r) => { this.refField['row'+ row +'col'+ i] = r; }} handler={this.actionFunction} key={'row'+ row +'col'+ i}></FieldButton> 
    Buttons.push(thisButton) 
    } 
    return Buttons 
} 

renderField(){ 
    var Field = new Array(this.props.h); 
    for (let i = 0; i < this.props.h; i++) { 
    let row = this.renderRow(i); 
    Field.push(<View key={i} style={styles.fieldWrap}>{row}</View>); 
    } 
    this.field = Field; 
}