Question

我正在构建一个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似乎没有任何简单的方法让子组件与父级进行通信。

我会把一个道具传递给那个关闭主要模态的回调函数，但是在我定义模态的地方，我没有看到任何方式可用的：

<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，请致电callback中的child。

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

child

在你的jsfiddle中你已经在render方法中定义了回调，因此它在组件的每次重新呈现时都被执行了。 我强烈建议您多次阅读 Thinking in React - 它会回答您的所有问题。

<强>伪代码

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

现在，只要<Parent> modalClose () { console.log('modal closed...') } <Child modalClose={modalClose} /> <Parent/>关闭，您就会< Child />：

modal

如何让一个子组件控制父进行反应？

1 个答案: