一般的に使用されている機能の重複を防ぐために、Reactで小道具を介してRefを渡します。

Question

私は5種類のボタンコンポーネントを用意しています。私が5つのコンポーネントすべてに持っている機能の1つは、ボタンをクリックするとボタンがフォーカスを失うことです（.blur()を使用）。私はアクセシビリティ上の理由から：focusスタイルを持っていますが、ボタンがクリックされた後、私はfocusスタイルを失う必要があります。

5つのボタンすべてにまったく同じ機能を記述するのではなく、この機能を処理するために別のコンポーネントを作成するのが理にかなっています。

私はこのようなことをする前にこのようなことをする必要はありませんでした。私は小道具を経由してリファレンスを渡すことは、私の現在の知識では、それは私が望むものを達成する唯一の方法だと思われます。私はそれが次のようになり、ページ上でレンダリングされるボタンの構成要素のうちの1つのこの内部やるとしたら

：

const Page =() => { 
    const loseFocus =() => { 
    this.btn.blur(); 
    }; 

    return (
    <Button 
     onClick={loseFocus} 
     ref={(btn) => { this.btn = btn; }} 
    > 
     Toggle 
    </Button> 
); 
}; 

const Button = props => (
    <button onClick={props.onClick}> 
    {props.children} 
    </button> 
); 

を私はすべてのボタンのためにこれを行うにはしたくありません私がこれまでに含んでいたコンポーネントは、理想的には、クリックされた後、すべてのボタンが自動的にフォーカスを失うことになりました。

$('.btn').on('click', function() { 
$(this).blur(); 
}; 

私は私が知っている：私はそうのようなイベントリスナーを持つ（すべて5つのコンポーネントに共通のクラスである）私はすべての.btnの要素をターゲット可能性がjQueryの中でこのような何かをした場合

プレーンなjavascriptで何か非常によく似たことをすることができますが、これはReactのベストプラクティスに対して起こるでしょうか？

Answer 1

この場合、私は少し異なる戦術を使いたいと思います。私は

<Button type="large" text="cool" link={href}/> 

別名とCSSをクリックまたは何でも私が欲しいごとにトグルされる使用

render() 
{ 
    return <div style={css}>button stuff</div> 
} 

内のすべての私のニーズに合うように、変数のプロパティを持つ1つのボタンコンポーネント を構築します。

コンポーネントあたりのCSSが使用されている場合は、実際の電力があります の現在のインスタンスでは、JavaScriptがどのようなCSSになるかを制御するためにjavascriptを使用できます。コンポーネントの状態の変化などで動的なCSSの突然変異を作ることさえ可能です。