React：コンポーネント1の上にマウスを置いて、別のコンポーネントのスタイルを変更します。

Question

私は反応を覚えていますが、ボタン上にマウスを置くのを待っている画像を覆うように、これは）動作します：

class Product extends Component { 
    constructor(props) { 
     super(props); 
     // 1. bind your functions in the constructor. 
     this.mouseOver = this.mouseOver.bind(this); 
     this.mouseOut = this.mouseOut.bind(this); 
     this.state = { 
      hover: false 
     }; 
    } 

    // 2. bind it with fat arrows. 
    mouseOver =() => { 
     this.setState({hover: true}); 
    } 
    mouseOut() { 
     this.setState({hover: false}); 
    } 

    render() { 
    return (
     <Link to={"/products/"+this.props.value.uid}> 
     <button className="Product" onMouseEnter={this.mouseOver.bind(this)} onMouseLeave={this.mouseOut.bind(this)}> 
      <img className="ImageGrid" src={this.props.value.media}/> 
      {this.state.hover ? (
      <div className="ImageOverlay"> 
       <div className="TextOverlay"> 
       <p><b>{this.props.value.name}</b></p> 
       <p>${this.props.value.price}</p> 
       </div> 
      </div>) : null} 
     </button> 
     </Link> 
    ); 
    } 
} 

は私の質問です...のではなく、このコンポーネントによってレンダリングされた画像の上にオーバーレイを追加するので、私は別のコンポーネントによってレンダリングされた画像を変更したいことを言わせず、オーバーレイdiv要素を適用することにより、その画像のCSS設定を変更することによって、フィルタを適用するようにすることができます：フィルタ：グレースケール（100％）。したがって、この画像があります：

<img className="PicBox" src={this.state.img[sid-1]} /> 

別のコンポーネントによってレンダリングされます。ここで

は、私は戦略があるかもしれない考えていますものです：

は、私の元のコンポーネント（私はホバーその上に1）を持って、私はそれの上にカーソルを置くかどうかにトラックを保持小道具「状態」を持っています私が上記のように。

ImageXをレンダリングするもう1つのコンポーネントでは、イメージをレンダリングする方法（グレースケールで表示するかどうか）を決めるために、Hoverコンポーネントのpropにアクセスして状態を確認する必要があります。

他のコンポーネント内でホバーコンポーネントの状態にアクセスするにはどうすればよいですか？

あなたは、このような再来やフラックスとして、いくつかの状態管理するライブラリを使用していないとあなたが必要な、コンポーネント間の状態にアクセスできるようにする限り

Answer 1

を（私の戦略がオフになっている場合、または、ヒントをいただければ幸いです）それらの共通の親です。あなたは、一般的に子コンポーネントまでプロパティを渡す、リアクトで

ParentComponent { 
    hoverHandler(isHover) { 
     this.childIsHover = isHover; 
    } 
    render() { 
     <hoverComponent onHover={this.hoverHandler} /> 
     <imageComponent overlay={this.childIsHover} /> 
    } 
} 

Answer 2

：最後に あなたは、この（擬似コード）のようなものを持っています。そのため、無関係のコンポーネントに状態にアクセスするために「上に上って行きたい」のではなく、共有されている親コンポーネントから渡された状態にアクセスする必要があります。

ImageXコンポーネントがProductの子である場合、その状態を直接<ImageX hover={this.state.hover} />に渡すことができます。 ImageXの小道具でhoverにアクセスできます。

Productの子でない場合は、共有の親から状態を渡して、両方のコンポーネントからアクセスする必要があります。

Answer 3

リアクトと協力している場合、あなたは状態を維持する責任を負うべき人について考えなければなりません。この場合、ボタンのコンポーネントにはでないでない が格納されている必要があります。そのコンポーネントの子ではない別の コンポーネントからアクセスする必要があるためです。

代わりに、ホバー状態の の保存を担当する親コンポーネントを作成し、ボタンコンポーネントとイメージコンポーネントの両方をレンダリングする必要があります。 親に関数をバインドすることができます。そうすれば、子が他の子に の小道具として渡されたときでも、親の状態を更新することができます。

したがって、たとえば、あなたの親コンポーネントは次のようになります。

class Parent extends Component { 
    constructor() { 
    super() 

    this.state = { 
     hover: false 
    } 

    this.updateHoverState = this.updateHoverState.bind(this) 
    } 

    updateHoverState (hover) { 
    this.setState({ hover: hover }) 
    } 

    render() { 
    <div> 
     <ButtonComponent updateHoverState={this.updateHoverState} /> 
     <ImageComponent hover={this.state.hover} /> 
    </div> 
    } 
} 

は今、あなたのボタンコンポーネントは、単なる関数とすることができる、と に独自のいずれかの状態を維持する必要はありません。あなたは this.props.updateHoverStateを呼び出すことによって、親状態を更新することができます。

function ButtonComponent (props) { 
    return (
    <button 
     onMouseEnter={() => this.props.updateHoverState(true)} 
     onMouseLeave={() => this.props.updateHoverState(false)} 
    /> 
) 
}