时间戳

首页 > 解决方案 > 将值传递给道具 - 反应

reactjs - 将值传递给道具 - 反应

问题描述

我有一个名为 ArticlePage 的函数组件，其中 match 作为道具

const ArticlePage = ({ match }) => {
    const name = match.params.name;
    const article = articleContent.find(article => article.name === name);

    if (!article) return <h1>Article does not exist!</h1>

    return (
        <>
        <h1>{article.title}</h1>
        {article.content.map((paragraph, key) => (
            <p key={key}>{paragraph}</p>
        ))}
        </>
    );
}

在 App.js 内部，我在没有传递数据的情况下调用了函数组件（考虑到这些事情，我有 2 个问题。

<Route path = "/article/:name" component = {ArticlePage} />
  1. 在这行代码中解构的目的是什么const ArticlePage = ({ match }) => {，根据我的理解，以某种方式传递给道具的值是 /article/:name，我不认为这个 url 参数是数组或对象。
  2. 传递给 ArticlePage 属性的值是什么？如果是 url 参数：/article/:name，怎么做？为什么数据的传递看起来不像<Route path = "/article/:name" component = {ArticlePage(/article/:name)} />是一个正常的函数

标签： reactjs

解决方案

React Router 文档回答了你的问题。Route组件会自动将 prop 传递给您match提供的任何组件。该match道具包含有关用户当前 URL 如何与提供的路径匹配的详细信息。

由于您提供的路径包含name作为 URL 参数，因此 的值name将match作为match.params.name.

推荐阅读