如何获得子组件来控制父组件的反应？

Question

我正在构建一个Modal组件，并希望确保它可以轻松适合各种不同的可能的Modal设计。

就我而言，它将具有可选的页眉，内容和页脚。 到目前为止，我对此没有任何疑问，代码如下：

class ModalHeader extends React.Component {
    render () {
        const children = React.Children.map(this.props.children, _.identity);
        return (
            <div className="modal-header">
                {children}
            </div>
        );
    }
}

class ModalFooter extends React.Component {
    render () {
        const children = React.Children.map(this.props.children, _.identity);
        return (
            <div className="modal-footer">
                {children}
            </div>
        );
    }
}

class ModalContent extends React.Component {
    render () {
        const children = React.Children.map(this.props.children, _.identity);
        return (
            <div className="modal-content">
                {children}
            </div>
        );
    }
}

class Modal extends React.Component {
    render () {
        var header, footer, content = null;
        React.Children.map(this.props.children, function(child){
            if (child.type === ModalHeader) {
                header = child;
            }
            if (child.type === ModalFooter) {
                footer = child;
            }
            if (child.type === ModalContent) {
                content = child;
            }
        });

        return (
            <div>
                {header}
                {content}
                {footer}
            </div>
        );
    }
}

现在是关闭模态的问题。 我希望可以关闭模​​式，而无需单击任何子组件中的元素，无论该元素位于左侧还是右侧或其他任何内容中，并且可能深深嵌套在该组件特定的标记中。

有一个可以包装标记的组件，可以是X，关闭图标或按钮，请确保在单击该元素时关闭了整个模态。

class ModalCloser extends React.Component {
    render () {
        const children = React.Children.map(this.props.children, _.identity);
        return (
            <div onClick={this.close} className="modal-closer">
                {children}
            </div>
        );
    }

    close () {
        // no idea what goes here!!
    }
}

在React中似乎没有任何简单的方法可以使子组件与父组件进行通信。

将prop传递给更接近的元素（将是用于关闭主要模式的回调函数）会很好，但是在我要定义模式的地方，我看不到任何可用的方式：

<Modal>
    <ModalHeader>
        <div>
            <header>
                <h1>Title!!</h1>
                <div class="float-right">
                    <ModalCloser closeHandler={???}>
                        X
                    </ModalCloser>
                </div>
            </header>
        </div>
    </ModalHeader>
    <ModalContent>
        ...
    </ModalContent>
</Modal>

另外，我看到我可以递归地遍历所有后代，并且可能对ModalCloser类型的所有后代执行某些操作，但是我也没有真正找到一种方法来做到这一点。

允许传递子组件或子代组件这样的子组件以保持布局灵活性，同时又有可能在这种情况下关闭模态的最佳解决方案是什么？

Answer 1

将callback从parent传递给child然后在关闭modal ，在child调用该callback 。

这是代码的简单版本，其中modalClose是从child传递给parent的callback 。 您也可以在jsfiddle中对其进行测试 。

class ModalCloser extends React.Component {

  render () {
    return (
      <div onClick={this.props.close}>
        {this.props.children}
      </div>
    );
  }
}

class Main extends React.Component {

  modalClose() {
    alert('closing')
  }

  render() {
    return (<ModalCloser close={this.modalClose}>X</ModalCloser>);
  }
}

ReactDOM.render(
  <Main />,
  document.getElementById('container')
);

在您的jsfiddle中，您已经在render方法中定义了回调，因此该回调在组件的每次重新渲染时执行。 我强烈建议您多次阅读《 React中的思考》，它将回答您的所有问题。

---

伪代码

<Parent>
  modalClose () { 
   console.log('modal closed...') 
  }
  <Child modalClose={modalClose} />
<Parent/> 

现在在您的< Child />每当modal关闭时：

closeHandler = { this.props.modalClose }