如何使用reactjs将Like值从一个组件传递到另一个组件？

Question

我是个新手，有一个数据组件，我们在其中显示报价标题，如果有人感兴趣，那么他们将单击详细信息，然后可以填写表格。当我们在标题旁边看到时，将显示感兴趣的用户编号（Like）。当我们单击“喜欢”链接时，它将重定向到ViewDetails组件以显示用户的详细信息。我的目标是吸引更多的用户。但是无法从Like组件获取ViewDetails链接的编号。有人可以帮我这个疑问吗？

数据组件：

class Data extends React.Component {
  constructor() {
    super();
    this.state = {
      Data: []
    };
  }
  componentDidMount() {
    this.fetchData();
  }

  fetchData() {
    fetch("/api/post")
      .then(res => res.json())
      .then(data => {
        this.setState({
          Data: data
        });
      });
  }
  render() {
    const { Data } = this.state;
    return (
      <div>
        {Data.map(data => {
          return (
            <div key={data.DId}>
              <div className="a-header">{data.title}</div>
              <div className="mylink">
                <Link to={`/Fillform/${data.DId}`}>
                  Details <Icon name="angle double right" size="small" />
                </Link>
              </div>
              <div className="link">
                <Link to={`/ViewDetails/${data.Did}`}>Like</Link>
              </div>
            </div>
          );
        })}
      </div>
    );
  }
}
export default Data;

ViewData组件：

class ViewDetails extends React.Component {
 constructor() {
    super();
    this.state = {
      View: [],
      Like: '',

    }
  }
  componentDidMount() {
    this.fetchData();
  }
  fetchData() {
    fetch("/api/Users/" + this.props.match.params.id)
      .then(res => res.json())
      .then(data => {
        this.setState({
          View: data.item1,
          Like: data.item2
        });
      });
  }

  render() {
    const { View } = this.state;
    return (
      <Segment>
        {View.map(tab => {
          return (
            <Table color="blue" className="myresponse">
              <Table.Header>
                <Table.Row>
                  <Table.HeaderCell>Name</Table.HeaderCell>
                  <Table.HeaderCell>Email</Table.HeaderCell>
                </Table.Row>
              </Table.Header>

              <Table.Body key={tab.DId}>
                <Table.Row>
                  <Table.Cell>{tab.name}</Table.Cell>
                  <Table.Cell>{tab.email}</Table.Cell>
                </Table.Row>
              </Table.Body>
            </Table>
          );
        })}
      </Segment>
    );
  }
}

从ViewDetails中，我必须通过Like变量获取感兴趣的用户数。

我的查询是，如果我们无法从viewDetails中获取数字，那么我们需要制作父子组件。但是我无法弄清楚如何为这两个组件制作父级和子级组件。

“ https://codesandbox.io/s/cocky-engelbart-s8xfp”有人可以帮我吗？在此先感谢

Answer 1

从组件尝试像这样传递它：

<Link
    to={{
      pathname: "/ViewDetails/${data.Did}",
      likes: {data.Did}
   }}>
    Like
</Link>

在接收组件中，使用]进行访问>

this.props.location.likes