Question

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

我尝试通过引用传递引用，但是它们始终以不确定的形式结束。我认为状态更改会很尴尬，因为没有真正的“事件”。我正在使用create-react-app，react-routerv4和react-bootstrap。

在App.js中

run

在Band.js中

MatchCallback

为每个路线的每个部分（即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>
  );
}

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

Answer 2

道具将是未定义的，因为没有带bandText的道具向下传递到App组件。路线嵌套在App组件中，this.props.band1Text表示您希望从传递给App的道具中读取。尝试将band1Text和band2Text作为道具传递给App组件。另外，要读取不是功能的道具，只需在Band.js组件中使用{this.props.band1Text}

React Router的结构化-传递函数

2 个答案: