2レベル上のコンポーネントの状態を変更するにはどうすればよいですか？

Question

私はReactを学んでおり、コンポーネントの抽出を開始しました。子コンポーネントにonClickのようなイベントをバインドする方法を理解していますが、孫はどうですか？

例：

私はListコンポーネントを持っています。それはListRow子供を持っています。各ListRow子の中に、親からその特定の行を削除するボタンコンポーネントがあります（List). My thoughts are that the deleteRow click handler would be on the List component so that I could then set the state. However, I can't seem to find a way to call the grandparent's ( List`）eventHandler。

<List /> // has event handler as well as state for the list items 
    <ListRow /> 
     <DeleteButton /> //when clicking this i want to delete parent <ListRow /> 

私はちょうどチェーンの下でonclickを渡すはずですか？

// grandparent function that goes into parent 
heirloom() 
{ 
    console.log("grandparent says hi"); 
    //something happens 
} 

// everything else (put into all subsequent children) 
heirloom() 
{ 
    this.props.heirloom(); 
} 

<List heirloom="this.heirloom"> 
    <ListRow heirloom="this.heirloom" /> 
     <DeleteButton onClick="this.heirloom"/> 

私の構文はオフにすることができ、これがまたは私はしばらくの間反応で遊ぶ機会がなかった、動作しない場合があります：あなたは何か、これを試みることができる

Answer 1

コンポーネントを作成するときは、コンポーネントが機能コンポーネントか状態を管理する必要があるコンポーネントかどうかを判断する必要があります。ここでは、機能を子に、子を子に渡す「祖父母」がある場合の例を示します。

class GrandParent extends Component { 
    handleState = (obj) => { 
    this.setState(obj); 
    } 

    render() { 
    return (
     <Parent handleState={this.handleState} /> 
    ); 
    } 
} 

function Parent(props) { 
    render() { 
    return (
     <Child handleState={props.handleState} /> 
    ); 
    } 
} 
    function Child(props) { 
    render() { 
     return (
     ... 
    ); 
    } 
    } 

は、あなたが一緒にそれを渡したいでもどこでもあなたが呼び出す必要があります：コンポーネントが状態を管理する必要がない場合、あなたはそれの「親」と「子」として以下のような「機能性成分」を作りますあなたはあなたがそれを送るどんなコンポーネントからでもそれをprops.handleState()として使うことができます。

Answer 2

。もしそうなら、素晴らしい！そうでない場合は、より良い答えを持つ人が来てくれることを祈っています。