Question

我的情况是我需要一个可以在每个页面中使用的反应组件（不替换当前页面并在页面上覆盖此组件）。我知道我可以在每个页面的render（）中包含这个组件，但是我有1000多个页面，并且它不会具有很高的可扩展性。我在想是否有可能有一个静态的＆＃39;反应每页都可访问的组件。我很反应，并没有在网上找到任何这样的例子。非常感谢！

Answer 1

是的，这绝对是可能的。虽然有一些选项，但正确的选项很大程度上取决于您的应用程序。没有任何代码或示例，很难说你需要什么，但无论如何这里有一些建议：

您需要做的是首先将该组件导入到要加载它的每个页面中。假设这个全局组件位于一个名为GlobalComponent.js的单独文件中，并且位于同一目录中。

import GlobalComponent from ./GlobalComponent（请注意，您可以省略文件名中的.js）

然后在你的渲染功能中，你只需这样写：

render() {
  return (
    ...

    <GlobalComponent />

    ...
  );
}

就是这样！如果您愿意，可以将道具传递给它：

<GlobalComponent className="style1" />

甚至给它children

<GlobalComponent>Hello World!</GlobalComponent>

如果您不使用JSX，可以像这样创建此元素：

React.createElement(GlobalComponent, {className: 'style1'}, 'Hello world!')

其中第二个参数是道具，第三个参数是孩子。

这两种方法都会呈现这个：

<GlobalComponent class="style1">Hello world!</GlobalComponent>

如果您不想要对所有文件执行此操作，那么您也可以在根反应组件之前粘贴该html。

例如：

<body>
<div class="global-component"></div>
<div id="main">
  //react stuff goes here. "global-component" is on all pages.
</div>

ReactDOM.render(reactElement, document.getElementById('main));

另一个选项就像第一个选项，但是您将另一个React Component传递给顶级父React Element，并在需要的地方渲染它。您可以继续传递并实现您想要的位置。这取决于你的申请。

如果您正在使用react-router，您可以执行类似@The的建议。

是否有可能有一个静态的＆＃39;反应可以在每个页面全局使用的组件

1 个答案: