反应 - 与子组件交互

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> 
     ); 
    } 
}