Структурирование React Router - прохождение функций - PullRequest
Новая
       16

Структурирование React Router - прохождение функций

0 голосов
/ 20 января 2019

Я довольно новичок в реагировании и мне просто интересно, есть ли какой-нибудь простой способ отображения информации из одного и того же компонента на разных маршрутах. В следующем коде в качестве примера у меня есть только две функции, которые просто возвращают div, полный текста, и, вызывая их и отображая их сразу (в классе или в маршрутизаторе), просто поместили бы их на одну и ту же «страницу».

Я пытался передать ссылку реквизитам, но они всегда заканчивались неопределенно. Я полагал, что изменение состояния будет неуклюжим, так как нет никакого реального "события". Я использую create-реагировать-приложение, реагировать-маршрутизатор v4, и реагировать-начальной загрузки.

In App.js 

import React, { Component } from 'react';
import './App.css';
import NavBar from './Components/NavBar/NavBar.js';
import Band from './Components/Text/Band.js';
import { Router, BrowserRouter, Link, Route } from 'react-router-dom';

class App extends Component {

  render() {
    return(
    <div>
      <BrowserRouter>
      <div className="RenderRouter">
          <Route exact path='/' component={NavBar}/>
          <Route exact path='/' component={ControlledCarousel}/>
          <Route exact path='/' component={Home}/>

          //<Route exact path='/Artists/ArtistX' component={Band}/>          
          <Route exact path='/Artists/Artist1' component={NavBar}/>
          <Route exact path='/Artists/Artist1' render={props => <Band band1text = {this.props.band1text} />}/>

          <Route exact path='/Artists/Artist2' component={NavBar}/>
          <Route exact path='/Artists/Artist2' render={props => <Band band2text = {this.props.band2text} />}/>
      </div>
      </BrowserRouter>
    </div>
    );
  }
}

export default App;

In Band.js 

import React, { Component } from 'react';
import './Band.css';

class Band extends Component {
//Constructor for state change would go here
    band1text(props) {
      return(
        <div id="band1Text"  className="BandText">
          <h1>"The best riffs!</h1>
        </div>
        );
      };

    band2text(props) {
      return(
        <div id="band2Text"  className="BandText">
          <p>More info coming soon! Check out the interview!</p>
        </div>
        );
      };
      //Create handlers to call functions, and pass reference?
    render() {
      return(
        <div className="BandDescription">
        //calling in DOM render object, can't pass props from here?
        //{this.props.band1text()} = compiler error
          {this.band1text()}
          {this.band2text()}
        </div>
       );
    }
}

export default Band;

Вероятно, было бы проще иметь отдельные компоненты и классы для каждого фрагмента каждого маршрута (т. Е. BandX.js, CarouselX.js), но это могло бы стать многословным, и пришлось бы импортировать много файлов. Я использую реагирование для создания компонента музыкального проигрывателя для приложения, поэтому я не просто использую стандартный JS.

Ответы [ 2 ]

0 голосов
/ 20 января 2019

Реквизиты будут неопределенными, поскольку реквизиты с bandText не передаются компоненту приложения.Маршруты вложены в компонент приложения, и this.props.band1Text означает, что вы ожидаете чтения из реквизитов, переданных в приложение.Попробуйте передать band1Text и band2Text в качестве реквизита для компонента App.Также, чтобы прочитать реквизит, который не является функцией, просто используйте {this.props.band1Text} в компоненте Band.js

0 голосов
/ 20 января 2019

Попробуйте написать что-нибудь подобное в рендере компонента Band: 

render() {
  return(
    <div className="BandDescription">
      {this.props.band1text && this.band1text()}
      {this.props.band2text && this.band2text()}
    </div>
  );
}

Таким образом, он проверяет пропеллер перед запуском любого метода.Если оба метода пройдены, обе функции вернутся.И вам не нужно передавать props этим методам.Попробуйте написать их как функции стрелок, чтобы они были связаны band1text = () => { ... }, вы все равно сможете получить доступ к this.props.band1text изнутри метода.

...