2
私はV2バージョンのreact-hoverという小さな反応コンポーネントを実装しています。子孫へのReact pass onMouseHoverコンポーネント
このライブラリでは、ユーザーがトリガーとホバーのコンポーネントを定義し、トリガーコンポーネントにマウスを置いたときにホバーコンポーネントが表示されるようにするだけです。
今私はティガーコンポーネントに子コンポーネントにonMouseHoverイベントを渡すの問題に直面しています
<ReactHover
options={optionsCursorTrueWithMargin}>
<ReactHover.Trigger>
<TriggerComponent />
</ReactHover.Trigger>
<ReactHover.Hover>
<HoverComponent />
</ReactHover.Hover>
</ReactHover>
：それは、子供たちだけのコンポーネントはホバーコンポーネントをティガーできるため
render() {
return (
<div
onMouseOver={this.onMouseOver.bind(this)}
onMouseOut={this.onMouseOut.bind(this)}
onMouseMove={this.onMouseMove.bind(this)}
onTouchStart={this.onTouchStart.bind(this)}
onTouchEnd={this.onTouchEnd.bind(this)}
>
{this.props.children.props.children}
</div>
)
}
が、上記実施中リスナーを親divにバインドしているので、親divのCSSの幅がchildenの幅よりも大きいという問題が発生したため、マウスがdiv内（子ではない）にあるときにホバーコンポーネントが表示されます。しかし、子コンポーネントとして渡されるので、子コンポーネントの内部コードを制御することはできません。
私はこの問題にどのように取り組んでいるのでしょうか？
例コードはhereです。 マウスイベントをバインドする場所here
これは何の解決策ですか？ 子コンポーネントにコードを配置できない場合、これらのイベントを子コンポーネントにバインドする方法。
以下は、トリガーコンポーネントの外側のマウスがまだホバーコンポーネントをトリガできる場合を示しています。
let childStyles = this.refs.triggerContainer.children[0].style
と現在の親コンテナに適用されます。ただ、コンテナに参照を追加し、子どもの幅を取得することで解決
チェック。これは他人が使うプラグインなので、トリガーは子ラッパーになります。必要に応じて、親コンテナのスタイルを渡すことができます。 – sahil
@sahilどのようにCSSを使って子供を包む？私のコードでは、私はそれをラップしますが、親divの幅がわずかに大きいと思われます – JavaScripter
直下の子の幅を取って親のdivに適用することができます。 – sahil