Question

因此，我正在使用前端的React构建一个RubyOnRails应用程序。我有几个微前端，我分别渲染它们。像这样：

index.html.erb

<div id="app-header" />
<div id="app-content" />

Header.jsx

import React from 'react';
import styled from 'styled-components';
import ReactDOM from 'react-dom';

const StyledHeader = styled.div`
   // ...
`;

const Header = () => {
  return <StyledHeader>...</StyledHeader>;
}

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Header />, 
    document.getElementById('app-header'));
});

App.jsx.jsx

import React from 'react';
import styled from 'styled-components';
import ReactDOM from 'react-dom';

const StyledApp = styled.div`
   // ...
`;

const App = () => {
  return <StyledApp>...</StyledApp>;
}

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <App />, 
    document.getElementById('app-content'));
});

问题在于，看起来好像样式化组件可以渲染ReactDOM.render中的最后一种样式。

因此，在这种情况下，只会设置app-content的样式。如果将其删除，则将设置app-header的样式。我检查了元素，当存在app-header时，看起来app-content中的样式不在DOM中。就像它被覆盖了。

我不能将内容和标头放在同一个根组件下，因为内容并不总是React。

有没有一种方法可以使样式起作用而又不破坏这种结构？

样式化的组件不能与多个ReactDOM.render一起使用

0 个答案: