Refを動的に作成する

Question

私の子コンポーネントにrefを持たせたいのですが、コンポーネントを作成するときにrefを指定する必要はありません。

<Parent> 
    <Child /> 
    <Child /> 
</Parent> 

そして、私は親が子コンポーネントの状態にアクセスできるようにしたい：だから私はこのような何かを持っていると言います。簡単な方法は、各コンポーネントにリファレンスを追加することですが、これを、constructor()機能の間に、これをエンドユーザーから抽象化するための機能として、これらのコンポーネントを一般化したいと考えています。

class Child extends Component { 
    constructor(){ 
     super(); 
     this.state = {'abc': 123} 
     this.ref=Math.random(); 
    } 
} 

親クラスのだから内側：

は親が子コンポーネントの状態にアクセスできるようにそれを作るためのクリーンな方法は、あなたのようなものを持っているような子が作成されたときのように、あります

class App extends Component { 
    render(){ 
     <Parent> <Child /> <Child /> </Parent> 
    } 
} 

：だから私は次のようにコンポーネントのセットを宣言することができるようにしたい

class Parent extends Component { 
    componentWillMount(){ 
     console.log(this.refs); 
    } 
} 

：私のような何かを行うことができます

私は各子にアクセスすることができ、親が子コンポーネントを反復するので、その状態になります。

Answer 1

1. 親が子コンポーネントの状態にアクセスできるようにします。

Stateは、コンポーネント自体からのみアクセスできます。 Parentおよびchildコンポーネントは、独自の状態にのみアクセスできます。子供stateに値をpropsとして渡すことはできますが、親は子コンポーネントの状態自体にアクセスできません。

2. 子コンポーネントに設定を設定します。

   なぜこれが必要ですか？参照は
   フォーカス、テキスト選択、またはメディアの再生を管理します。
   命令的なアニメーションをトリガーします。
   サードパーティのDOMライブラリとの統合
   

   参考資料の使用については、このリンクをご覧ください。
   https://facebook.github.io/react/docs/refs-and-the-dom.html

とにかく、コンポーネントは、独自の引用文献を持つことができ、あなたは子コンポーネントへのREFを設定することができ、私は提案します

render: function() { 
    return (
     <div> 
     <Child ref="child" /> 
     <div><button onClick={this.handleClick}>ACCESS REF</button></div> 
     </div> 
    ); 
    }, 

handleClick: function() { 
    alert(this.refs.child.refs.input.getDOMNode().value); 
    } 
}); 

let Child = React.createClass({ 
    render: function() { 
    return <input ref="input" />; 
    } 
}); 

小道具を行うこととして、あなたは子供へのコールバックを渡す必要がありますどちらかあなたのもの。：

Answer 2

私は私が作っていたフォームについては、このまったく同じことを必要とし、これは私はあなたが持っていることを考えると、自動的に

子コンポーネントへのREFを追加するために思い付いたものです：

<Parent> 
    <Child /> 
    <Child /> 
</Parent> 

これを親コンポーネントのレンダー機能で使用して、すべての子に参照を追加することができます。

render() { 
    let wrappedChildren = []; 

    React.Children.map(this.props.children, (child, i)=> { 
    if (!child) { 
     return; 
    } 
     let refName = 'child' + i 
     wrappedChildren.push(React.cloneElement(child, { 
     key: refName, 
     ref: refName, 
     } 
    )); 
    }, this); 
    return (
    <View> 
     {wrappedChildren} 
    </View> 
) 
} 

これは文字列からなるすべての子を加えた現在のマップのインデックスに参照を追加し、同じ順序でそれらをレンダリングし、あなたにこれを行うと同等のものを与えます：

私は、文字列、参考文献は推奨されていることを知っているが、私はあなたにも変更することで、コールバックとして引用文献を使用することができ、単純な、それを維持しようとしました：

ref: refName 

へ：

ref: (c) => { this[refName] = c } 

そして親コンポーネントでthis.child0などで使用します。

希望します。