React - 与子组件交互

Question

我想知道什么是父子组件交互的最佳实践，以及以下方法是否满足良好实践。

假设我们有两个组件：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 方法添加回调以在更新子级状态后对父级执行一些操作更容易。

但由于我没有经验，是否有任何（甚至是最轻微的）问题？

Answer 1

对我来说似乎有点矫枉过正。

公开这些方法并仅在 Parent 中引用 Child 的实例然后在需要时调用这些方法有什么问题？

Parent:

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

Child:

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

React - 与子组件交互

React - interact with child component

oop

encapsulation

typescript

reactjs