Question

我正在开发React应用程序，但对于将prop传递到组件感到困惑。

在检查互联网时，我发现传递道具是通过将其添加到路线中

<Route exact path='/' render={(props) => <HomePage {...props} active={1} />}

但是我遇到的一个问题是，因为我所有的路线都在app.js的switch语句内，所以我如何从另一个页面传递道具。

例如：这是我的文件夹结构-

-App.js

-电影文件夹

--- movie_page.js

--- description_page.js

假设我在movie_page中有一个link语句，可以转到description_page，并且我想将一些计算出的量作为prop传递给description_page，我该如何实现？我所有的路线都在App.js中，而我要作为prop传递的值仅在movie_page.js

中计算

Answer 1

您可以通过Link传递参数。例如，您应该具有这样的路线

<Route 
path="/description/:value1" 
render={props => <Description {...props} />}
/>

和在电影页面中

<Link
      to={{
        pathname: "/description/samplevalue",
        param1: 1,
        param2: 2,
        param3: { id: 1, name: "jack" }
      }}
    >
      Description
</Link>

现在您可以访问所有参数：

  <div>
    Description page
    <h4> {this.props.match.params.value1}</h4>
    <h4> {this.props.location.param1}</h4>
    <h4> {this.props.location.param2}</h4>
    <code> {JSON.stringify(this.props.location.param3)}</code>
  </div>

工作代码沙盒sample ，希望它会有用

将道具传递给ReactJS中的组件

1 个答案: