Как вызвать маршрутизацию реагировать в другом файле - PullRequest
Новая
       13

Как вызвать маршрутизацию реагировать в другом файле

0 голосов
/ 27 апреля 2018

Я хотел бы задать общий вопрос. У меня есть menuContent.js, что-то вроде этого. 

class MenuContent extends Component {  


     constructor(props) {
     super(props)
      this.items = [];


    //   for (let i=1; i<=10; i++) {
    //  //   this.items.push(i)
    //   }
     }


  render() {

    return (

            <div className="menu">

               <a
                href="/animation/animation"
                onClick={this.props.closeCallback}
            >

                <img src={animation} alt="good as"/>
                animation
            </a>
            <br />
            <br />

     )
  }
}

а также файл, который называется routing.js, что-то вроде этого 

class routing extends Component {  


     constructor(props) {
     super(props)
      this.items = [];


    //   for (let i=1; i<=10; i++) {
    //  //   this.items.push(i)
    //   }
     }


  render() {

    return (
        <HashRouter>
            <div className="menu">

                <ul className="header">
                                <li><NavLink to="/animation/animation">Animation</NavLink></li>
                    <li><NavLink to="/bars/bars">Bars</NavLink></li>
                </ul>
                <div className="content">
                    <Route exact path="/" component={Home}/>
                    <Route path="/animation/animation" component={Animation}/>
                    <Route path="/bars/bars" component={Bars}/>
                </div>

но я не знаю, как вызвать routing.js в файл menucontent, за исключением <routing /> в класс menucontent

1 Ответ

0 голосов
/ 27 апреля 2018

Я не уверен, что полностью понял ваш вопрос, но вот как повторно использовать компоненты в React.

Просто закодируйте ваш компонент по своему желанию и экспортируйте его 

import React from 'react';

class Routing extends React.Component {
    // code of component
}

export default Routing;

Теперь ваш компонент Routing доступен для любого другого скрипта.

Чтобы повторно использовать его, просто импортируйте его и используйте, как если бы он был в том же файле. 

import React from 'react';
import Routing from './Routing.js';

function() {
    return(
        <div>
            <Routing />
        </div>
    );
}
...