Question

我正在尝试使用'react-router-dom'中的链接将属性从一个组件传递到另一个组件。

我要传递的属性是{this.props.postContent}。

<Link to={
    pathname: "/posts/" + this.props.postContent.id,
    postContent={this.props.postContent}
}>
    Read More...
</Link>

我首先尝试在Link to={中仅使用一个大括号，就像在this SO post的正确答案中所显示的那样，但是我得到了错误：

分析错误：意外的令牌，预期为“}”

我在documentation中进行了查看，可以看到添加路径名时使用了两组花括号，所以我尝试了以下方法：

<Link to={{
    pathname: "/posts/" + this.props.postContent.id,
    postContent={this.props.postContent}
}}>
    Read More...
</Link>

但是收到以下错误：

解析错误：意外的关键字“ this”

有人可以给我更多关于将postContent添加到链接中的建议吗？

**编辑以显示全部内容：

import React, { Component } from "react";
import { Link } from "react-router-dom";
import Post from "../components/post";

class PostSummary extends Component {
  render() {
    console.log("incoming", this.props.postContent.title);
    return (
      <div key={this.props.postContent.id}>
        <h3 className="postTitle complements">
          {this.props.postContent.title}
        </h3>
        <p className="postText">{this.props.postContent.text}</p>
        <Link to={{
          pathname: "/posts/" + this.props.postContent.id,
          postContent={this.props.postContent}
          }}>
            Read More...
        </Link>
        <p className="postDate">
          - Posted on {this.props.postContent.createdAt}
        </p>
      </div>
    );
  }
}

export default PostSummary;

Answer 1

在您的代码中，postContent不正确：

<Link to={{
    pathname: "/posts/" + this.props.postContent.id,
    postContent={this.props.postContent} // <-- this line
}}>

您必须给to一个对象。只是一个普通的JS对象。如果采用该值，并且（出于演示目的）将其分配给变量，则可能会看到其错误原因：

const example = {
    pathname: "/posts/" + this.props.postContent.id,
    postContent={this.props.postContent} // <-- this line
}
// It should be:
const example = {
    pathname: "/posts/" + this.props.postContent.id,
    postContent: this.props.postContent,
}

将道具中的对象传递到React Link

1 个答案: