React从同一index.js的不同HTML页面渲染多个DOM元素
[英]React render multiple DOM elements from different HTML pages from same index.js
问题描述
I'm essentially trying to write a JavaScript plugin that can go embed on sites written in react. 
我实质上是在尝试编写一个JavaScript插件，该插件可以嵌入在以react编写的网站上。 My issue is I need to be able to render components in DOM elements on different pages without using routing. 我的问题是我需要能够在不使用路由的情况下在不同页面上的DOM元素中呈现组件。 Here is my code so far.. 到目前为止，这是我的代码。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Products from './Products';
const app = (
<ApolloProvider client={client}>
<App />
</ApolloProvider>
)
const products = (
<ApolloProvider client={client}>
<Products />
</ApolloProvider>
)
ReactDOM.render(app, document.getElementById('root'));
ReactDOM.render(products, document.getElementById('products'));
Then when this code is bundled and placed on html page.. 然后，将此代码打包并放在html页面上时。
Index.html Index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="products.html">Products</a>
<div id="root"></div>
<script src="main.f043f60e.js"></script>
</body>
</html>
Products.html Products.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="index.html">Home</a>
<div id="products"></div>
<script src="main.f043f60e.js"></script>
</body>
</html>
The contents of my components are not shown. 我的组件的内容未显示。 It only works if I have both DOM elements ( products and root ) on each page, but that defeats the purpose. 仅当我在每个页面上都具有DOM元素（ product和root ）时，该方法才有效，但这违背了目的。 How can I accomplish this without having all root elements present on a page? 如何在页面上没有所有根元素的情况下完成此任务？
2 个解决方案
解决方案1
0 2018-06-26 16:17:20
This is not an ideal set up you're looking for when implementing React. 在实现React时，这不是您想要的理想设置。 But you can do conditional render logic inside your script : 但是您可以在脚本中执行条件渲染逻辑：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Products from './Products';
const app = (
<ApolloProvider client={client}>
{window.location.href === "https://www.example.com/app.html " ? <App /> : ''}
{window.location.href === "https://www.example.com/products.html " ? <Products/> : ''}
</ApolloProvider>
)
ReactDOM.render(app, document.getElementById('root'));
And then change <body> in both html ( in app.html and products.html ) to : 然后将两个html（在app.html和products.html中）的<body>都更改为：
<body>
<a href="products.html">Products</a>
<div id="root"></div>
<script src="main.f043f60e.js"></script>
</body>
Ps. 附言 Approach not recommended while using React. 不建议在使用React时使用该方法。
解决方案2
0 已采纳 2018-06-26 16:18:12
Presumably, the reason your .render 's aren't working unless you have both app and products included as DOM elements is due to an error. 除非您将应用程序和产品都包含为DOM元素，否则您的.render不能正常工作的原因大概是由于错误。 ie ReactDOM.render(app, document.getElementById('root')); 即ReactDOM.render(app, document.getElementById('root')); can't find an element with ID root . 找不到ID为root的元素。
This should work if you continue with the proposed structure: 如果继续建议的结构，这应该可以工作：
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import Products from './Products'; const app = ( <ApolloProvider client={client}> <App /> </ApolloProvider> ) const products = ( <ApolloProvider client={client}> <Products /> </ApolloProvider> ) const rootElement = document.getElementById('root'); if (rootElement) { ReactDOM.render(app, rootElement); } const productsElement = document.getElementById('products'); if (productsElement) { ReactDOM.render(products, productsElement); }
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.