react-redux child1トリガーchild2コンテナメソッド

Question

私は別の子によってトリガーの子メソッドにしようとしています。 の親コンポーネントを使用します。

私はreduxで作業するときに、店舗のフィールドを変更する必要があります。 とコンポーネントが必要な小道具で再レンダリングされています。 しかし、この場合、私は最初の子メソッドを実行するたびに、何も保存する必要はありません。

import React from 'react'; 
import Child1Container from "./Child1Container"; 
import Child2Container from "./Child1Container"; 

export default class Parentextends React.Component { 
    constructor(props){ 
    super(props); 

    } 

    RunChild1Method(){ 
    // Run Child1 Method 
    } 

    render() { 
    return (
      <div> 
       <Child1Container /> 
       <Child2Container RunChild1Method={this.RunChild1Method} /> 
      <div> 
      ) 
    } 
} 

Chiled2コンテナ

import { connect } from 'react-redux'; 
import Child2Component from "./Child2Component"; 

const mapStateToProps = (state, ownProps) => { 

    return { 
      RunChild1Method: ownProps.RunChild1Method 
    }; 
}; 

const Child2Container = connect(mapStateToProps)(Child2Component); 

export default Child2Container ; 

CHILD2コンポーネント

import React from 'react'; 

export default class Child2Component extends React.Component { 
    constructor(props){ 
    super(props); 
    } 

    render() { 
    return (
     <button onclick={() => {this.props.RunChild1Method()}}> Click Me!</ button> 

    ) 
    } 
} 

Answer 1

達成するために、この使用、参考文献：https://reactjs.org/docs/refs-and-the-dom.html

export default class Parent extends React.Component { 
    RunChild1Method(){ 
    if (!this.child1Ref) return; 
    this.child1Ref.runMethod(); 
    } 

    render() { 
    return (
     <div> 
     <Child1Container ref={(comp) => { this.child1Ref = comp; }} /> 
     <Child2Container RunChild1Method={this.RunChild1Method} /> 
     <div> 
    ) 
    } 
} 

（私の意見）ではなく、のようにアプリを構成することを強くお勧めします。コンポーネントは機能のカプセル化でなければなりません。これは将来の頭痛を引き起こすアンチパターンです。