Question

我试图使用React构建一个简单的网站。我必须包含一个导航栏，该导航栏应显示在顶部的每个页面中。所以我认为我可以使用react在不同的HTML页面中重用此导航栏。但是我做不到。我的方法错了吗？我对使用React非常陌生。

import React, { Component } from 'react';
import './Nav.css';
import maitlogo from './maitlogo.png';
class Nav extends Component {
  render() {
    return (
        <div id="parent">
        <div className="heading">   
    <img class="logo" src={maitlogo} alt="logo"/>
        <h1 className="title">Maharaja Agrasen Insitute of technology,Delhi</h1>
        </div>
        <div id='cssmenu'>
            <ul>
               <li><a href='index.html'><span>HOME</span></a></li>
               <li className='active'><a href='login.html'><span>LOGIN</span></a>
                     <ul>
                         <li><a href='login.html'><span>STUDENT</span></a></li>
                         <li><a href='login2.html'><span>TEACHER</span></a></li>
                         </ul>
               </li>
               <li><a href='a.html'><span>ABOUT US</span></a></li>
               <li className='last'><a href='contacts.html'><span>CONTACT</span></a></li>
            </ul>
        </div>
        </div>

    );
  }
}

export default Nav;

我已经在index.html和login.html中尝试了上述代码，但仅在index.html中有效。

Answer 1

如果要在不同的ui <- fluidPage( mainPanel( selectInput('cluster', '', 1:7), plotOutput('ap_plot', height = 200) ) ) ) server <- function(input, output, session) { output$ap_plot <- renderPlot({ data %>% filter(cluster == input$cluster) %>% plot_sequences(.by = ts_cluster, .colour = id) }) } shinyApp(ui = ui, server = server)页上重复使用React component，则必须在每个页面上创建一个占位符html，然后将div的组件render放入该div 。假设每个页面上都有div，并且div有id="root"，则可以执行以下操作：

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

请记住，您必须在每个.js页上包含React的bundle html文件

实际上，我认为使用React并不是一个好习惯。

如何在index.html以外的文件中重复使用此navbar React组件？

1 个答案: