javascript - React Router 结构 - 传递函数

Question

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

我尝试通过 props 传递 ref，但它们总是以未定义结束。我认为状态改变会很尴尬，因为没有真正的“事件”。我正在使用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;

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

Answer 1

尝试在 Band 组件渲染中编写类似的内容:

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

这样它就会在运行任何方法之前检查 prop。如果两个方法都被传递，两个函数都会返回。并且您不需要将 props 传递给这些方法。尝试将它们编写为箭头函数，以便将它们绑定(bind) band1text = () => { ... }，您仍然可以从以下位置访问 this.props.band1text在方法内部。