リンクする方法子コンポーネントと親コンポーネントをインスタンス化するときに反応させますか？

Question

TopBarItemとMenuの2つのコンポーネントがネストされており、「メニューが開いている場合は上部のバーにツールチップが表示されません」という機能があります。

<TopBarItem tooltip="Settings"> 
    <Menu onOpen={parent.tooltipOff} onClose={parent.tooltipOn}>…</Menu> 
</TopBarItem> 

これはJSX/Reactで可能ですか？ JSに落としてもいいですが、できるだけJSXにしておきたいと思っています。

もう1つのオプション（削除済み回答から）は、両方のコンポーネントをtooltipEnabledの状態を維持する第3の祖父母にラップし、プロパティを介してTopBarItemに渡します。それは完全に受け入れられますが、可能であれば、祖父母を経由するのではなく、直接TopBarItemの状態を切り替えることをお勧めします。

Answer 1

以前に削除された回答によって提案されている実装に移行します。誰もが知っているならば、より簡潔な解決策を受け入れるだろう。

export class TopbarMenuItem extends Component { 
    state: { 
    tooltipEnabled: bool 
    } 
    tooltipOn:() => null; 
    tooltipOff:() => null; 

    constructor(props: Object) { 
    super(props); 
    this.state = { 
     tooltipEnabled: true 
    } 
    this.tooltipOn = this.tooltipOn.bind(this); 
    this.tooltipOff = this.tooltipOff.bind(this); 
    } 

    tooltipOff() { 
    this.setState({tooltipEnabled: false}); 
    } 

    tooltipOn() { 
    this.setState({tooltipEnabled: true}); 
    } 

    render() { 
    return (
     <TopbarItem tooltip={this.state.tooltipEnabled ? this.props.tooltip : ''}> 
     <Menu onOpen={this.tooltipOff} onClose={this.tooltipOn}> 
      {this.props.children} 
     </Menu> 
     </TopbarItem> 
    ); 
    } 
}