节点中文档对象的替代

Question

我正在研究一个React组件，以将文本复制到剪贴板上。我为此使用了document.execCommand('copy')，这对于浏览器来说效果很好。但是，在其他环境中可能找不到“文档”对象，并且会在那里中断。节点。

我可以使用其他替代方法来使其适用于跨平台吗？

Answer 1

jsdom被广泛用于Node.js应用程序中，以提供对某些客户端功能（主要是DOM）的支持。 document.execCommand是not among them。

为了使document.execCommand('copy')在SSR期间不会引起错误，可以在节点中对正在使用的客户端功能进行打桩：

global.document = {
  execCommand() {}
};

另一种方法是检测Node.js环境，例如与detect-node。符合条件的情况：

if (isNode)
  document.execCommand('copy');

或者使用松散耦合的组件和IoC / DI容器。 Redux存储或React上下文可以充当容器，可以从中读取与平台相关的组件。

例如，使用React 16.3 context API：

const ClipboardComponent = (props) => /* default implementation */;

export const PlatformContainer = React.createContext({
  ClipboardComponent,
});

从使用它的上下文中检索该组件：

<PlatformContainer.Consumer>{({ ClipboardComponent }) => 
  <ClipboardComponent/>
}</PlatformContainer.Consumer>

使用客户端的默认实现呈现

render(<App />, rootElement);

并且可以在服务器端的入口点提供no-op实现：

renderToString(
  <PlatformContext.Provider value={ { ClipboardComponent: () => null } }>
    <App />
  </PlatformContext.Provider>
);