反應 - 與子組件交互

Question

我想知道什麼是父子組件交互的最佳實踐，以及以下方法是否滿足良好實踐。

假設我們有兩個組件：Parent和Child，其中Parent以類似於獲取引用元素的方式獲取Child的處理程序。

class Parent extends React.Component<{}, {}> { 

    private handlers: { 
    Child: ChildHandlers 
    /** And so on... **/ 
    }; 

    render() { 
    return (
     <div> 
     <Child handlers={(handlers: ChildHandlers) => { this.handlers.Child = handlers; }} /> 
     <button onClick={() => this.handlers.Child.toggle() /** Or change Parent.state and then trigger **/}>toggle from parent</button> 
     </div> 
    ); 
    } 
} 

class Child extends React.Component<ChildProps, ChildState> { 
    constructor(props: ChildProps) { 
    super(props); 

    this.exposeHandlers(); 
    } 

    private toggle(): void { 
    this.setState({ visible: !this.state.visible }); 
    } 

    private exposeHandlers() { 
    let handlers: ChildHandlers = { 
     toggle:() => this.toggle() 
    }; 

    this.props.handlers(handlers); 
    } 

    render() { 
    return (
     <div> 
     { this.state.visible && (
      <div> 
      <h2>I'm being toggled!</h2> 
      <button onClick={() => this.toggle()} />toggle from child<button> 
      </div> 
     ) } 
     </div> 
    ); 
    } 
} 

這似乎是很好的，因爲：

• 它允許一致
• 這就像暴露由兩個組件使用的接口無需連接他們太多
• 它保持孩子的狀態出家長的業務在合理範圍內
• 然後添加回調到toggle方法在更新後對Parent執行一些操作孩子的狀態。

但是由於我沒有經歷過，有沒有（甚至是最輕微的）問題呢？

Answer 1

似乎對我來說太過分了。

將這些方法暴露出來並在Parent中引用Child的實例然後在需要時調用這些方法會出現什麼問題？

家長：

class Parent extends React.Component<{}, {}> { 
    private child: Child; 

    render() { 
     return (
      <div> 
      <Child ref={ el => this.child = el } /> 
      <button onClick={() => this.child.toggle()}>toggle from parent</button> 
      </div> 
     ); 
    } 
} 

兒童：

class Child extends React.Component<{}, ChildState> { 
    public toggle(): void { 
     this.setState({ visible: !this.state.visible }); 
    } 

    render() { 
     if (!this.state.visible) { 
      return <div />; 
     } 

     return (
      <div> 
       <div> 
        <h2>I'm being toggled!</h2> 
        <button onClick={() => this.toggle()}>toggle from child</button> 
       </div> 
      </div> 
     ); 
    } 
}