Question

M基本上是新的反应，所以我试图创建一个小的谷歌地图集成应用程序。我确实设法通过调用componentDidMount()来完成它，该<div id='map'/>在加载const routes=( <BrowserRouter> <Main/> </BrowserRouter>) ReactDOM.render(routes, document.getElementById('root'));之后执行所有gmaps处理。一直都很好，直到这个。现在，当我添加react-dom-render添加一些路由时。什么都没有屏幕上。这是我的设置

index.js

export default class Main extends React.Component{
render (){
    return(
        <main>
            <Switch>
              <Route path='/' component={App}/>
            </Switch>
        </main>
    )
}

Main.js

export default class App extends React.Component {
componentDidMount() {
let map = new window.google.maps.Map(document.getElementById('map'), {
  center: {lat: 13.0827, lng: 80.2707},
  zoom: 13,
  mapTypeId: 'roadmap',
});
render() {
return (

  <div id='app'>
    <div id='map' />
  </div>)
  }
} }

}

App.js

ReactDOM.render(<App/>, document.getElementById('root'));

因此，如果我在服务器上运行此操作，我会得到一个空白屏幕（在开发控制台中，我可以看到发生在幕后的所有事情都会发生）。仅供参考如果我这样做到index.js

  foreach (var stud in Model.Registrations)
                {
                    <text> @registration.Student.FirstName @stud.Student.LastName </text><br />
                }

即简单地渲染App组件。一切都很好。有人会抛出一些光，或者我错过了什么！感谢

Answer 1

最新答案，但可能会帮助其他人。问题可能出在您的CSS上。您是否收到警告“资源被解释为样式表，但以MIME类型text / html传输” ？

如果是这样，请将<base href="/">放在html标头中。

ReactJS - react-router-dom路由器没有呈现谷歌地图组件的DOM虽然代码执行没有问题

1 个答案: