时间戳

首页 > 解决方案 > 如何在 index.html 以外的文件中重用这个导航栏 React 组件？

html - 如何在 index.html 以外的文件中重用这个导航栏 React 组件？

问题描述

我正在尝试使用 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.

标签： htmlreactjs

解决方案

如果你想React component在不同的html页面上重用，你必须为div每个页面创建一个占位符，然后render将组件放入该div. 假设您div在每个页面上div都有id="root"，您可以这样做：

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

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

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

推荐阅读