リファクタリングする方法DOMNodeを

Question

私はfindDOMNodeはノーではないことを知っています。私はそれを取り除くことができると感じています。

私は最近、buttonタグの代わりにButtonコンポーネントを使用するようにコンポーネントをリファクタリングしました。それは次のようになります。

<Button 
    ref={(input) => this.toggleZipLink = input}> 
    Add New Zip 
</Button> 

と私は小道具を介して他のコンポーネントから呼び出さ私のコンポーネントで機能があります。

shouldClickOutside(e) { 
    if (findDOMNode(this.toggleZipLink).contains(e.target)) { 
     return false; 
    } 
    return true; 
} 

私はthis.toggleZipLinkがコンポーネントであるためfindDOMNodeを使用する必要があります。 Buttonがbuttonだったら、私はそれを必要としませんでした。

内部のbuttonタグを親に公開する方法はありますか？私はthis.toggleZipLinkにrefsオブジェクトがあることに気づきましたが、空であるようです。参考のために、Buttonはではなく、ステートレス関数コンポーネントなので、refをサポートする必要があります。

ソリューション編集：Buttonインサイド

私がref ref={(button) => this.button = button}を追加しました。その後、親のdivで私はthis.toggleZipLink.button経由でアクセスすることができます。

Answer 1

Button（名前はbuttonRefなど）の他の非refの小道具を参照コールバックを渡すことができます。 Buttonのレンダリングではthis.props.buttonRefがrefとして、下位のbuttonに渡されます。

class Button extends Component { 
    render() { 
    const { buttonRef, ...passThroughProps } = this.props; 
    return <button {...passThroughProps} ref={buttonRef} /> 
    } 
} 

また、あなただけのButtonにREFを取り、その後toggleZipLink.whateverYouNamedYourRef経由でアクセスすることができました。

refsを渡すのは難しく、定型文が必要です。