时间戳

首页 > 解决方案 > React Router 结构化 - 传递函数

javascript - React Router 结构化 - 传递函数

问题描述

我对 reactjs 很陌生，只是想知道是否有任何简单的方法可以将来自同一组件的信息显示到不同的路由。在下面的代码中作为示例，我只有两个函数，它们只是返回充满文本的 div，调用它们并立即渲染它们（在类中或在路由器中）只会让它们位于同一个“页面”上。

我试过通过道具传递参考，但它们总是未定义。我认为状态变化会很尴尬，因为没有真正的“事件”。我正在使用 create-react-app、react-routerv4 和 react-bootstrap。

在 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;

在 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）只使用单独的组件和类可能会更容易，但这可能会变得冗长，并且必须导入许多文件。我也在使用 react 为应用程序构建音乐播放器组件，这就是为什么我不只是使用标准 JS。

标签： javascripthtmlreactjsreact-routerreact-bootstrap

解决方案

道具将是未定义的，因为没有带有 bandText 的道具被传递给 App 组件。路由嵌套在 App 组件中，this.props.band1Text 意味着您期望从传递给 App 的道具中读取。尝试将 band1Text 和 band2Text 作为道具传递给 App 组件。另外要读取不是函数的道具，只需在 Band.js 组件中使用 {this.props.band1Text}

推荐阅读