React：クラスのアクションをトリガーする

Question

私たちはcurrentexpress/jade-frontendをreactjsに書き直しています。私たちの現在のフロントエンドでは、例えばアクションをトリガーするクラスを、持っている。このように、ブートストラップモーダルを表示：

$(document).on('click', '.showUserInfo', function(event) { 
    $('#modal-userInfo').modal('show'); 
}); 

私たちは、溶液中でランダム要素（DIV /ボタン/ HTML）にこれらのクラスを置きます。アクションをトリガーする要素は異なりますが、アクションは同じです。

概念的に、私はあなたがリアクションでこれをどうやって行うのかを理解するのは難しいです。私は、これを使って、モーダルとラップの要素を持つComponentを作成することができます（つまり、新しいコンポーネントをラップする代わりに）。しかし、これはラップされたコンポーネントの周りに余分な要素を生成しませんか？そして、コードの周りのいくつかの場所でモーダルを作成しませんか？

Answer 1

他の要素をラップするのに使用できるコンポーネントを作成します。

function ShowUserInfo(props) { 
    return (
    <div onClick={actions.showModal}> 
     {props.children}; 
    </div> 
); 
} 

Fluxを使用している場合は、対応するアクションクリエーターがショーモーダルアクションを送信していることを確認してください。

const actions = { 
    showModal() { 
    dispatch({ type: 'SHOW_MODAL' }); 
    } 
}; 

次に、この新しいコンポーネントに他のリアクションコンポーネントをラップして、この動作を適用します。

<ShowUserInfo> 
    <ProfilePicture /> 
</ShowUserInfo> 
<Username />