文章/答案/技术大牛

发布

社区首页 >问答首页 >将道具传递给ReactJS中的组件

问将道具传递给ReactJS中的组件
EN

Stack Overflow用户

提问于 2019-12-23 00:52:19

回答 1查看 71关注 0票数 1

我当时正在开发一个React应用程序，但是对于如何将prop传递给组件感到困惑。

在网上查了一下，我发现通过道具是通过在路线中添加它-

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

但我遇到的一个问题是，由于我的所有路由都在app.js的switch语句中，我如何从不同的页面传递属性。

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

-App.js

-Movie文件夹

-movie_page.js

-description_page.js

假设我在movie_page中有一条link语句，要转到description_page，并且我想将一些计算的数量作为一个属性传递给description_page，我该如何实现呢？我的所有路由都在App.js中，并且我想作为属性传递的值只在movie_page.js中计算

reactjs

react-router

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-12-23 09:34:05

您可以通过Link.for示例传递参数，您应该具有如下所示的路由

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

Working Codesandbox sample，我希望它能对你有用

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59446212

复制

相似问题

问将道具传递给ReactJS中的组件
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将道具传递给ReactJS中的组件EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将道具传递给ReactJS中的组件
EN