как включить файл в общие файлы reactjs?

Question

У меня есть два общих файла, таких как header.js и footer.js, я хочу включить еще один index.js файл в эти общие файлы.

Я, вероятно, новичок в ReactJs. Я понятия не имею, как решить эту проблему.

было бы здорово, если бы кто-нибудь мог мне помочь. заранее спасибо!

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Common from './App.js'

import Index from './components/home/index.js';
import Header from './components/common/header.js';
import Footer from './components/common/footer.js';

import { BrowserRouter, Route, Switch } from 'react-router-dom';


ReactDOM.render(
  <BrowserRouter>
      <Switch>


        <Route exact path="/" component={Index} />

      </Switch>
  </BrowserRouter>
  , document.getElementById('root'));

Answer 1

Я поставил вам пример, это поможет вам понять это.

сначала создайте файл root.js, например

import React, {Component} from 'react';
import HeaderComponent from './components/header/headerComponent';
export default class Root extends Component {
    constructor(props) {
        super(props);
        this.state = { };
    }

    render() { 
        return ( 
            <div>
                <HeaderComponent />
                <div className="container-fluid"> 
                    { this.props.children}  
                </div>
            </div>
        );
    }
}

и в вашем router.js сделайте это:

import React, { Component } from 'react'; 
import { Router ,  Route , browserHistory  } from 'react-router';
// child components -->
import RootComponent from './root';
import EmployeesComponent from './components/employees/employeesComponent';
import ProfileComponent from './components/profile/profileComponent';
import NotFoundComponent from './components/notFound/notFoundComponent';

class RouterComponent extends Component {

    constructor(props) {
        super(props);
        this.state = { current:false   }; 
    } 

    render() {
        return (
            <Router history={browserHistory}>
                <Route  component={RootComponent}> 
                    <Route   path="/" component={EmployeesComponent} /> 
                    <Route   path="employees" component={EmployeesComponent} /> 
                    <Route   path="profile" component={ProfileComponent} /> 
                    <Route   path="*" component={NotFoundComponent} status={404} />
                </Route>
            </Router>
        );
    }
}

export default RouterComponent;