他のコンポーネントとの直接の通信

Question

「Portlet」、「PortletTitle」、「PortletTool」、「PortletBody」の各コンポーネントがあります。すべて正常に動作しますが、今はコンポーネント間の単純なやりとりを追加します。すでに（このような構造で、今

<Portlet> 
    <PortletTitle> 
    <PortletTool toolCollapse={true}> 
    </PortletTitle> 
    <PortletBody>bla vla bla </PortletBody> 
</Portlet> 

PortletTool.js

class PortletTools extends React.Component { 

    static propTypes = { toolCollapse: PropTypes.bool }; 
    state = { collaped: false }; 

    handler =() => { 
     let newstate = !this.state.collaped; 
     this.setState({ collaped: newstate }); 
    }; 

    render() { 
     const classCollaped = !this.state.collaped ? "collapse" : "expand"; 
     let toolCollapse = this.props.toolCollapse 
      ? <a href="javascript:;" className={classCollaped} title="" data-original-title="" onClick={this.handler}>{" "}</a> 
      : ""; 

     return (
      <div className="tools"> 
       {toolCollapse} 
      </div> 
     ); 
    } 
} 

PortletBodyは、要素を表示/非表示にする小道具 "showbody" を持っていますが、私は次のことができます。私のアプリで使用する

アプリケーションの他のページで使用されています）私のPortletToolをクリックします。はい、どうですか？

"可能な場合は、"ポートセット "コンポーネントでこれを行う必要があります。

Answer 1

子供のコンポーネント間に何らかのやりとりを追加する場合は、lift state up.に役立つ位置にあります。この場合、折りたたみ状態をPortletコンポーネントに移動し、 Portletクラスの状態を変更するハンドラを登録し、コンテキストをバインドして、そのハンドラをあなたのPortletTool.に渡します。collapsedの状態をにpropsで渡すこともできます。例えば

：

class Portlet extends React.Component { 
    state={collaped:false}; 
    handler=()=>{ 
    let newstate=!this.state.collaped; 
    this.setState({collaped:newstate}); 
    } 

    render() { 
    return (
     <PortletTitle> 
      <PortletTool handler={this.handler}> 
     </PortletTitle> 
     <PortletBody collapsed={this.state.collapsed}>bla vla bla </PortletBody> 
    ) 
    } 
} 

次にどこかPortletTool中のonClick小道具にハンドラを割り当てます。 cannot read property of undefinedエラーが発生した場合は、bind the context to the handlerが必要です。