Question

我希望有一个基本组件，我的所有高阶组件都扩展它。

的内容

<BaseComponent>
   <App1>
      <... Other Components>
   </App1>
</BaseComponent>

其中BaseComponent包含诸如

之类的内容

class BaseComponent extends React.Component {
   render() {
      return (
        <Wrapper>
             {this.props.children}
             <ModalContainer>
             </ModalContainer>
        <Wrapper>);
    }
}

最终目标是能够在任何应用程序传递中说出＆＃34; message =＆＃39;错误＆＃39;＆＃34;并将显示一个模态对话框，说明＆＃34;错误＆＃34;无需将模态组件放在每个应用程序中。

这可能吗？或者我是独角兽的领域。我读了一些关于高阶作品的内容，但乍一看，它似乎并不像我正在寻找的那样。

Answer 1

通过高阶组件的组件组合是一种做类似子类化但使用组合而不是继承的方法。例如：

function wrapInBaseComponent(Component) {
  // Return a new component that renders `Component`
  // with all the same props, but also renders some
  // other stuff
  return (props) => {
    const { message, ...otherProps } = props;
    return (
      <Wrapper>
        <Component {...otherProps} />
        <ModalContainer message={message}>
        </ModalContainer>
      </Wrapper>
    );
  };
}

然后你会做这样的事情：

class MyComponent extends React.Component {
  // ...
}

const WrappedComponent = wrapInBaseComponent(MyComponent);

或者，如果您启用了ES7装饰器，则可以将其用作装饰器：

@wrapInBaseComponent
class MyComponent extends React.Component {
  // ...
}

这就是react-redux和react-dnd之类的工作方式;如果您没有从ReactReduxBaseComponent或类似的东西继承，则可以将组件放在呈现它的高阶组件中，但会添加其他功能。

reactjs所有组件的基类

1 个答案: