Question

我正在使用来自库的Modal组件，该库是在ReactModal之上编写的，并且具有以下API：

<Modal {...props} /> // all props are passed to ReactModal
<Modal.Header />     // some styles of header are applied
<Modal.Body />       // some styles of body are applied
<Modal.Footer />     // some styles of footer

现在，我想为我在应用程序中使用的所有Modal用法设置2个道具parentSelector和appElement。我该怎么做？我试图创建一个包装器来添加这两个道具

function AppModal(props) {
    return (
        <Modal parentSelector={getParent} appElement={getParent()} {...props} />
    );
}

但这会使AppModal.Header，AppModal.Body，AppModal.Footer undefined。

Answer 1

这是因为您实际上仅覆盖模态组件。 Modal.Header，Modal.Body和Modal.Footer是单独的组件，在Modal类上被设置为静态属性。

如果要在所有组件上设置parentSelector和appElement道具，则应包装所有组件。

function AppModal(props) {
  return (
    <Modal parentSelector={getParent} appElement={getParent()} {...props} />
  );
}

AppModal.Header = function (props) {
  return (
    <Modal.Header parentSelector={getParent} appElement={getParent()} {...props} />
  );
};

AppModal.Body = function (props) {
  return (
    <Modal.Body parentSelector={getParent} appElement={getParent()} {...props} />
  );
};

AppModal.Footer = function (props) {
  return (
    <Modal.Footer parentSelector={getParent} appElement={getParent()} {...props} />
  );
};

如果它们都与上面的示例相同，那么我可能会创建一个包装函数，如下所示：

function wrap (Component) {
  return function (props) {
    return <Component parentSelector={getParent} appElement={getParent()} {...props} />
  }
}

const AppModal = wrap(Modal);

AppModal.Header = wrap(Modal.Header);
AppModal.Body = wrap(Modal.Body);
AppModal.Footer = wrap(Modal.Footer);

为复合组件添加默认道具

1 个答案: